vue-monaco icon indicating copy to clipboard operation
vue-monaco copied to clipboard

Error with Vite

Open stephantabor opened this issue 3 years ago • 0 comments

Using Vite to build a vue project, with es module import like

import MonacoEditor from 'vue-monaco'
ReferenceError: require is not defined
    at a.mounted (vue-monaco.es.181a4dd2.js:6)
    at Mt (vendor.6a78aee7.js:6)
    at Qe (vendor.6a78aee7.js:6)
    at Object.insert (vendor.6a78aee7.js:6)
    at A (vendor.6a78aee7.js:6)
    at a.__patch__ (vendor.6a78aee7.js:6)
    at a.t._update (vendor.6a78aee7.js:6)
    at a.n (vendor.6a78aee7.js:6)
    at ui.get (vendor.6a78aee7.js:6)
    at ui.run (vendor.6a78aee7.js:6)

Error is from this block in the source


    } else {
      // ESM format so it can't be resolved by commonjs `require` in eslint
      // eslint-disable-next-line import/no-unresolved
      var monaco = require('monaco-editor');

      this.monaco = monaco;
      this.$nextTick(function () {
        _this.initMonaco(monaco);
      });
    }

I don't understand why the es-module build has require in it, but if I remove that and add

import * as monaco from 'monaco-editor';

I get up to the point where this issue https://github.com/vitejs/vite/discussions/1791 is relevant

stephantabor avatar Apr 16 '21 17:04 stephantabor