Unexpected usage at z.loadForeignModule

[Florian-Schoenherr]

The import from CDN (on README.md) doesn't work, or I'm doing something really wrong. Everytime I type a letter it throws a new error. I'm using rollup + svelte and can't really import from npm / don't know how. Tried several ways, only thing working was just putting it into the static folder, but that's pretty slow and hacky. So the CDN solution would be best.

[thepassle]

The problem here is that the required workers arent bundled with your app. If you inspect the network tab in your devtools, you'll see failing requests for /node_modules/@vanillawc/wc-monaco-editor/monaco/workers/json.worker.js. If you're using rollup you can use rollup-plugin-copy to copy along the required workers to your dist folder.

import copy from 'rollup-plugin-copy';

export default {
  /* config etc */
  plugins: [
    copy({
      targets: [{ src: 'node_modules/@vanillawc', dest: 'dist/node_modules' }],
      hook: 'writeBundle'
    })
  ]
}

It may be worth making a note of this in the docs, the Unexpected usage error from Monaco isn't very clear as to whats going on.

[Florian-Schoenherr]

@thepassle Thank you so much! We just abandoned Monaco for now, but this should help some people. I hope either this or some other version of a monaco web component will be available and maintained sometime soon :) Maybe Microsoft will do it, would make sense.

[evanplaice]

@thepassle Thanks, I'll make a note of this in the documentation, I'm thinking a FAQ section for common questions.

[Florian-Schoenherr]

@evanplaice btw. no disrespect to you, I think this here is kinda ambitious! Or I just don't know how it works at all 😄

[evanplaice]

@Florian-Schoenherr Not sure what you mean by 'ambitious'. This is simply a web component wrapper around Monaco Editor. I have plenty of previous experience working with Monaco so it's not a difficult thing for me.

As to the errors that display in the console. That's specifically a side-effect of running this web component directly from a CDN. Line @thepassle said before, the workers aren't bundled with the main source. This is intentional, to cut down on the sheer mass of code that gets loaded, the workers are side-loaded separately after Monaco Editor initially loads. This isn't a hack, it's the recommended usage as outlined in the official docs.

The current generation of CDNs tend to break this behavior because they run the code through a preprocessing step that breaks import.meta.url or they mangle the directory structure of the code. If you run the wc-monaco-editor sources directly from a web server you will see no such errors.

I need to make a note in the docs that this web component won't work when loaded directly from a CDN (until I find one that doesn't break stuff), otherwise it's 100% functional and ready for use in production.