wobsoriano / codeplayground

Codepen.io clone using Vue 3 and Monaco Editor
https://codeplayground.vercel.app
163 stars 45 forks source link

dynamic load failed #2

Open tearf001 opened 2 years ago

tearf001 commented 2 years ago

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?

tearf001 commented 2 years ago

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