Uncaught TypeError: Object prototype may only be an Object or null: undefined

[Jack-Works]

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at i (index.js:1)
    at s (index.js:1)
    at index.js:1
    at Object.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)
    at Object.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)
    at Module.self.MonacoEnvironment.getWorkerUrl (index.js:1)
    at o (index.js:1)

My code:

import React from "react";
import { App } from "./demo";
export default { title: "Button" };
const s = document.createElement("script");
s.type = "module";
s.src = "https://cdn.jsdelivr.net/npm/@vanillawc/wc-monaco-editor/index.js";
document.body.appendChild(s);
function Editor(props: { value: string }) {
    const ref = React.useRef<HTMLDivElement>(null);
    React.useEffect(() => {
        if (!ref.current) return;
        const dom = document.createElement("wc-wc-monaco-editor");
        dom.setAttribute("id", Math.random().toString());
        dom.setAttribute("language", "javascript");
        ref.current.appendChild(dom);
        return () => dom.remove();
    }, [ref.current]);
    React.useEffect(() => {
        if (!ref.current) return;
        // @ts-ignore
        ref.current.firstChild!.value = props.value;
    }, [ref.current, props.value]);
    return <div ref={ref}></div>;
}
export const Demo = () => (
    <>
                    <Editor value="return <div>AAAAAAAAA</div>;" />
                    <Editor value="return <div>Hello world!</div>;" />
    </>
);

[evanplaice]

Monaco can't load the service workers from an external domain

When the workers can't load it falls back to running language-server-protocol tasks (ie syntax highlighting) on the main thread and throws these errors.

If you run the web component from the same domain where the files are hosted (ie not jsDelivr) the warnings should go away. That's why the demo for this project is hosted here instead of on WebComponents.dev

[Jack-Works]

Oh... That's not too friendly to webpack. I don't find a grace way to load it...

[evanplaice]

You still need an index.html to load the bundle created by webpack.

Import the web component from there instead. If you don't need it on the landing page you could add async|defer to the script tag to optimize loading.

These web components aren't React components. They don't need to pass through a bundler to work. If you try to use them before they're defined no errors will be thrown. Undefined components are essentially empty divs.

[Jack-Works]

Yes as you can see I am manipulating raw dom to wrap it into a react component. The real problem here is I have to host a real folder for Monaco instead of let webpack handle it for me even I use real ES Module in browswr, I cant load it cross origin.