Cannot load language extension

v6
1

I am attempting to use import maps and codemirror 6. The basic setup works great. I am essentially copying code from this example here CodeMirror Bundling Example I actually want to use SQL as the language but have used javascript in the example code below as I would expect it is more commonly used and I should be able to get that to work. I cannot get python working either, I note the example with Python uses a Compartment and a call like language.of(python()) which also fails.

Using any language I get an error of the form;
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

<html>
    <head>
        <title>Hitrefresh</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">


        <script type="importmap">{
             "imports": {
                 "codemirror": "https://esm.sh/codemirror@6.0.1",
                 "@codemirror/lang-javascript": "https://esm.sh/@codemirror/lang-javascript@6.2.2"
             }
         }</script>
        <link rel="modulepreload" href="https://esm.sh/codemirror@6.0.1">
        <link rel="modulepreload" href="https://esm.sh/@codemirror/lang-javascript@6.2.2">
    </head>

    <body>
        <div id="editor" class="style: border 1px solid"></div>
    </body>
    <script type="module">
     import {EditorView, basicSetup} from "codemirror";
     import {javascript} from "@codemirror/lang-javascript";

     const el = document.getElementById("editor");
     console.log("editor connected", el);
     
     let editor = new EditorView({
         doc: "// a javascript comment",
         extensions: [basicSetup, javascript()],
         parent: el
     });

    </script>
</html>

If I remove javascript() from the extensions everything works.
If I use the above code in the try codemirror page it works. As does SQL if I do it there.
Why would I be getting this error in my page code?

2

The error probably indicates what’s going on—you’re loading some packages, likely including @codemirror/state, multiple different times. Your devtools network tab might be able to show how or why—they might be installed multiple times in your dependency tree (likely if you’re using yarn), or your module loader setup might be getting confused.

3

Thanks for the swift reply, apologies I haven’t had a chance to come back and check until just now. Yes the @codemirror/state lib is being requested more than once by due to the way esm.sh loads the imports. I have managed to make it only load once using a different syntax of theirs so I am rocking again. Thank you!