title: How to integrate monaco editor with electron-vue?
body: <p>I tried the monaco samples in <a href="https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md" rel="nofollow noreferrer">https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md</a></p>
  <p>I had some success, but when I use the electron-vue, I receive the following error:</p>
  <pre><code>Uncaught Error: Cannot find module 'monaco-editor' 
      at Module._resolveFilename (module.js:543:15)
      at Function.Module._resolveFilename (E:\vue-monaco-electron\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35:12) 
      at Function.Module._load (module.js:473:25)
      at Module.require (module.js:586:17)
      at require (internal/module.js:11:18)
      at eval (webpack:///external_%22monaco-editor%22?:1:18) 
      at Object.monaco-editor (http://localhost:9080/renderer.js:1790:1) 
      at __webpack_require__ (http://localhost:9080/renderer.js:791:30) 
      at fn (http://localhost:9080/renderer.js:102:20)
      at eval (webpack:///./src/renderer/components/Monaco.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:2:71)
  </code></pre>
  <p>My package config is as follows:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;axios&quot;: &quot;^0.18.0&quot;,
      &quot;monaco-editor&quot;: &quot;^0.26.1&quot;,
      &quot;monaco-editor-electron&quot;: &quot;^1.0.6&quot;,
      &quot;vue&quot;: &quot;^2.5.16&quot;,
      &quot;vue-electron&quot;: &quot;^1.0.6&quot;,
      &quot;vue-router&quot;: &quot;^3.0.1&quot;,
      &quot;vuex&quot;: &quot;^3.0.1&quot;,
      &quot;vuex-electron&quot;: &quot;^1.0.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;ajv&quot;: &quot;^6.5.0&quot;,
      &quot;babel-core&quot;: &quot;^6.26.3&quot;,
      &quot;babel-eslint&quot;: &quot;^8.2.3&quot;,
      &quot;babel-loader&quot;: &quot;^7.1.4&quot;,
      &quot;babel-minify-webpack-plugin&quot;: &quot;^0.3.1&quot;,
      &quot;babel-plugin-istanbul&quot;: &quot;^4.1.6&quot;,
      &quot;babel-plugin-transform-runtime&quot;: &quot;^6.23.0&quot;,
      &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
      &quot;babel-preset-stage-0&quot;: &quot;^6.24.1&quot;,
      &quot;babel-register&quot;: &quot;^6.26.0&quot;,
      &quot;cfonts&quot;: &quot;^2.1.2&quot;,
      &quot;chai&quot;: &quot;^4.1.2&quot;,
      &quot;chalk&quot;: &quot;^2.4.1&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^4.5.1&quot;,
      &quot;cross-env&quot;: &quot;^5.1.6&quot;,
      &quot;css-loader&quot;: &quot;^0.28.11&quot;,
      &quot;del&quot;: &quot;^3.0.0&quot;,
      &quot;devtron&quot;: &quot;^1.4.0&quot;,
      &quot;electron&quot;: &quot;^2.0.4&quot;,
      &quot;electron-builder&quot;: &quot;^20.19.2&quot;,
      &quot;electron-debug&quot;: &quot;^1.5.0&quot;,
      &quot;electron-devtools-installer&quot;: &quot;^2.2.4&quot;,
      &quot;eslint&quot;: &quot;^4.19.1&quot;,
      &quot;eslint-config-standard&quot;: &quot;^11.0.0&quot;,
      &quot;eslint-friendly-formatter&quot;: &quot;^4.0.1&quot;,
      &quot;eslint-loader&quot;: &quot;^2.0.0&quot;,
      &quot;eslint-plugin-html&quot;: &quot;^4.0.3&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.12.0&quot;,
      &quot;eslint-plugin-node&quot;: &quot;^6.0.1&quot;,
      &quot;eslint-plugin-promise&quot;: &quot;^3.8.0&quot;,
      &quot;eslint-plugin-standard&quot;: &quot;^3.1.0&quot;,
      &quot;file-loader&quot;: &quot;^1.1.11&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;inject-loader&quot;: &quot;^4.0.1&quot;,
      &quot;karma&quot;: &quot;^2.0.2&quot;,
      &quot;karma-chai&quot;: &quot;^0.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;^1.1.2&quot;,
      &quot;karma-electron&quot;: &quot;^6.0.0&quot;,
      &quot;karma-mocha&quot;: &quot;^1.3.0&quot;,
      &quot;karma-sourcemap-loader&quot;: &quot;^0.3.7&quot;,
      &quot;karma-spec-reporter&quot;: &quot;^0.0.32&quot;,
      &quot;karma-webpack&quot;: &quot;^3.0.0&quot;,
      &quot;listr&quot;: &quot;^0.14.3&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;0.4.0&quot;,
      &quot;mocha&quot;: &quot;^5.2.0&quot;,
      &quot;monaco-editor-webpack-plugin&quot;: &quot;^4.1.1&quot;,
      &quot;node-loader&quot;: &quot;^0.6.0&quot;,
      &quot;node-sass&quot;: &quot;^4.9.2&quot;,
      &quot;require-dir&quot;: &quot;^1.0.0&quot;,
      &quot;sass-loader&quot;: &quot;^7.0.3&quot;,
      &quot;spectron&quot;: &quot;^3.8.0&quot;,
      &quot;style-loader&quot;: &quot;^0.21.0&quot;,
      &quot;url-loader&quot;: &quot;^1.0.1&quot;,
      &quot;vue-devtools&quot;: &quot;^5.1.4&quot;,
      &quot;vue-html-loader&quot;: &quot;^1.2.4&quot;,
      &quot;vue-loader&quot;: &quot;^15.2.4&quot;,
      &quot;vue-style-loader&quot;: &quot;^4.1.0&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.5.16&quot;,
      &quot;webpack&quot;: &quot;^4.15.1&quot;,
      &quot;webpack-cli&quot;: &quot;^3.0.8&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.1.4&quot;,
      &quot;webpack-hot-middleware&quot;: &quot;^2.22.2&quot;,
      &quot;webpack-merge&quot;: &quot;^4.1.3&quot;
    }
  </code></pre>
  <p>The code:</p>
  <pre><code>&lt;script&gt;
  import * as monaco from 'monaco-editor';
  
  self.MonacoEnvironment = {
      getWorkerUrl: function (moduleId, label) {
          if (label === 'json') {
              return './json.worker.bundle.js';
          }
          if (label === 'css' || label === 'scss' || label === 'less') {
              return './css.worker.bundle.js';
          }
          if (label === 'html' || label === 'handlebars' || label === 'razor') {
              return './html.worker.bundle.js';
          }
          if (label === 'typescript' || label === 'javascript') {
              return './ts.worker.bundle.js';
          }
          return './editor.worker.bundle.js';
      },
  };
  
  export default {
      mounted() {
          console.log(this.$refs.container);
          const container = this.$refs.container;
          const editor = monaco.editor.create(container, {
              fontSize: 14,
              language: 'html',
              folding: true,
              foldingStrategy: 'indentation',
              automaticLayout: true,
              overviewRulerBorder: false,
              scrollBeyondLastLine: false,
              minimap: {
                  enabled: false,
              },
              value: 'test',
              lineNumbers: 'off',
          });
          container.style.width = '100%';
          container.style.height = '800px';
          console.log(editor);
      },
  };
  &lt;/script&gt;
  </code></pre>
  <p>webpack config in .electron-vue</p>
  <pre><code>let rendererConfig = {
    // devtool: '#cheap-module-eval-source-map',
    entry: {
      renderer: path.join(__dirname, '../src/renderer/main.js'),
      'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
          'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
          'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
          'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
          'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
    },
    externals: [
      ...Object.keys(dependencies || {}).filter(d =&gt; !whiteListedModules.includes(d))
    ],
  </code></pre>
  <p>Any idea what's going on?</p>