Import monaco-editor using Vite 2 - vue.js

Question

Currently, I have set up a Vite 2 project with monaco-editor as a dependency.
Whenever I am trying to use it says that the workers are not imported.
editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
at webWorker.js:38
Since I am using Vite 2 I have assumed that simply specifying the rollup plugin rollup-plugin-monaco-editor in the plugins array. However, I am still getting this issue.
export default defineConfig({
plugins: [
vue(),
monaco({ languages: ['javascript'] }),
],
});
Is there any proper way to import monaco-editor into a Vite 2 project?

Answer 1

With the latest release (2.0.0-beta.59) it is fixed.
You can now add the environment workers without any further configuration (ref: https://github.com/vitejs/vite/discussions/1791)
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.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 === 'css' || label === 'scss' || label === 'less') {
return new cssWorker()
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker()
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
}
return new editorWorker()
}
}

Answer 2

The accepted answer is ok in dev build, but in production build at current version (v2.1.2), Uncaught ReferenceError: window is not defined is raised on page load.
So in addition to the accepted answer, build.rollupOptions.output.manualChunks needs to be added to vite.config.js like the following.
// vite.config.js
import { defineConfig } from 'vite';
const prefix = `monaco-editor/esm/vs`;
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
jsonWorker: [`${prefix}/language/json/json.worker`],
cssWorker: [`${prefix}/language/css/css.worker`],
htmlWorker: [`${prefix}/language/html/html.worker`],
tsWorker: [`${prefix}/language/typescript/ts.worker`],
editorWorker: [`${prefix}/editor/editor.worker`],
},
},
},
},
});