codeplayground
codeplayground copied to clipboard
dynamic load failed
Thanks to the demo, I run the demo,it worked fine.
But when I use it in Vue Router
{
path: 'index',
name: 'CoderBasicDemo',
component: () => import(path-to-monaco-editor.vue),
meta: {
...
},
},
it failed in
GET http://localhost:4200/node_modules/.vite/monaco-editor_esm_vs_editor_editor_worker?worker.js?v=a081fe2b net::ERR_ABORTED 404 (Not Found)
MonacoEditor.vue:7 GET http://localhost:4200/node_modules/.vite/monaco-editor_esm_vs_language_json_json_worker?worker.js?v=a081fe2b net::ERR_ABORTED 404 (Not Found)
MonacoEditor.vue:8 GET http://localhost:4200/node_modules/.vite/monaco-editor_esm_vs_language_css_css_worker?worker.js?v=a081fe2b net::ERR_ABORTED 404 (Not Found)
MonacoEditor.vue:9 GET http://localhost:4200/node_modules/.vite/monaco-editor_esm_vs_language_html_html_worker?worker.js?v=a081fe2b 404 (Not Found)
MonacoEditor.vue:10 GET http://localhost:4200/node_modules/.vite/monaco-editor_esm_vs_language_typescript_ts_worker?worker.js?v=a081fe2b net::ERR_ABORTED 404 (Not Found)
what did I miss?
These codes work. yyx990803 on 29 Jan 2021 I just looked into it and it seems Monaco Editor's ESM usage requires pre-bundling the workers:
{ // root of vite.config.js options
optimizeDeps: {
include: [
....// others
`${prefix}/language/json/json.worker`,
`${prefix}/language/css/css.worker`,
`${prefix}/language/html/html.worker`,
`${prefix}/language/typescript/ts.worker`,
`${prefix}/editor/editor.worker`
]
}
}
ref: https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md