[Bug] Getting Could not resolve "monaco-editor/esm/vs/editor/editor.worker"

[Employee87]

Describe the bug

I am using vite 5.1.21 and monaca editor 0.55.1 in an electron project and this is my main.ts. This works fine in debug mode, but when I try to build it I get the below. What am I doing wrong?

error during build:
[vite-plugin-moncao-editor-esm] Build failed with 1 error:
error: Could not resolve "monaco-editor/esm/vs/editor/editor.worker"

and

✓ 1780 modules transformed.
X [ERROR] Could not resolve "monaco-editor/esm/vs/editor/editor.worker"

  The module "./esm/vs/editor/editor.worker" was not found on the file system:

    node_modules/monaco-editor/package.json:44:11:
      44 │     "./*": "./*"
         ╵            ~~~~~

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {router} from './routes/router'
import { vuetify } from './plugins/vuetify';
import pinia from './plugins/pinia';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') return new jsonWorker();
    if (label === 'typescript' || label === 'javascript') return new tsWorker();
    return new editorWorker();
  }
};

const app = createApp(App)

app.use(router);
app.use(vuetify);
app.use(pinia);

app.config.errorHandler = (err, instance, info) => {
  console.error("Vue error:", err);

  // fire your own event so App.vue can catch it
  window.dispatchEvent(
    new CustomEvent("vue-global-error", { detail: err })
  );
};

app.mount('#app').$nextTick(() => {
  window.ipcRenderer.on('main-process-message', (_event, message) => {
    console.log(message)
  })
})

and in vite.congif.ts

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'
import vuetify from "vite-plugin-vuetify";
import { readFileSync } from 'node:fs';
import monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm'

const pkg = JSON.parse(readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps:{
    include:[
      'monaco-editor/esm/vs/editor/editor.worker',
      'monaco-editor/esm/vs/language/json/json.worker',
      'monaco-editor/esm/vs/language/typescript/ts.worker'
    ]
  },
  plugins: [
    vue(),
    vuetify({autoImport:true}),
    monacoEditorEsmPlugin(),
    electron({
      main: {
        // Shortcut of `build.lib.entry`.
        entry: 'electron/main.ts',
        vite: {
          build: {
            rollupOptions: {
              external: ['keytar'],
            },
          },
        },
      },
      preload: {
        // Shortcut of `build.rollupOptions.input`.
        // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
        input: path.join(__dirname, 'electron/preload.ts'),
      },
      // Ployfill the Electron and Node.js API for Renderer process.
      // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
      // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
      renderer: process.env.NODE_ENV === 'test'
        // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
        ? undefined
        : {},
    }),
  ],
  define: {
    __APP_VERSION__: JSON.stringify(pkg.version),
  }
})

Reproduction

https://github.com/microsoft/monaco-editor

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.22000
    CPU: (4) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 8.94 GB / 32.00 GB
  Binaries:
    Node: 22.21.1 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.4 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.2600.0), Chromium (143.0.3650.80)
    Internet Explorer: 11.0.22000.2600

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ismaildasci]

this is a common issue with monaco in vite + electron. the problem is how vite handles web workers during build.

fix:

1. first, use the vite-plugin-monaco-editor-nls instead of esm plugin:

npm install vite-plugin-monaco-editor-nls -D

2. update vite.config.ts:

import monacoEditorPlugin from "vite-plugin-monaco-editor-nls";

export default defineConfig({
  plugins: [
    monacoEditorPlugin({
      languageWorkers: ["editorWorkerService", "json", "typescript"]
    }),
    // ... other plugins
  ],
  // remove optimizeDeps for monaco
});

3. remove the worker imports from main.ts:

// DELETE these lines
// import editorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
// import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker.js?worker";

4. also remove the MonacoEnvironment setup from main.ts - the plugin handles it.

5. alternative approach using @monaco-editor/loader:

npm install @monaco-editor/react

this handles worker loading automatically.

6. if you must use the esm approach, try adding to vite.config:

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        "monaco-editor": ["monaco-editor"]
      }
    }
  }
}

the root cause is that vite resolves esm paths differently in dev vs build. the plugin approach abstracts this away.

[ismaildasci]

Hey! Classic monaco-editor + Vite headache. Worker paths not handled correctly in production builds.

Solution 1: Use vite-plugin-monaco-editor (recommended)

npm uninstall vite-plugin-monaco-editor-esm
npm install vite-plugin-monaco-editor -D

import monacoEditorPlugin from 'vite-plugin-monaco-editor'

export default defineConfig({
  plugins: [monacoEditorPlugin({})]
})

Remove your manual MonacoEnvironment setup - the plugin handles everything.

Solution 2: Manual worker setup

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') return new jsonWorker()
    return new editorWorker()
  }
}

Key point: Dont mix plugin-based setup with manual MonacoEnvironment - pick one approach.

[Employee87]

I used this

import monacoEditorPlugin from 'vite-plugin-monaco-editor';

and then

    monacoEditorPlugin({}),

in plugins in vite.config.ts

and then removed this from main.ts

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') return new jsonWorker();
    if (label === 'typescript' || label === 'javascript') return new tsWorker();
    return new editorWorker();
  }
};

then I get this error

failed to load config from C:\Users\user\source\repos\DataLab\vite.config.ts
error during build:
TypeError: monacoEditorPlugin is not a function
    at file:///C:/Users/user/source/repos/DataLab/vite.config.ts.timestamp-1768797436812-2ebc5df8528ae.mjs:34:5
    at ModuleJob.run (node:internal/modules/esm/module_job:274:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
    at async loadConfigFromBundledFile (file:///C:/Users/user/source/repos/DataLab/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66975:15)
    at async loadConfigFromFile (file:///C:/Users/user/source/repos/DataLab/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66816:24)
    at async resolveConfig (file:///C:/Users/user/source/repos/DataLab/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:66416:24)
    at async build (file:///C:/Users/user/source/repos/DataLab/node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:65503:18)
    at async CAC.<anonymous> (file:///C:/Users/user/source/repos/DataLab/node_modules/vite/dist/node/cli.js:829:5)