Unrecognized extension value[...] with HTML javascript modules

v6
1

Hello,

I am assessing CodeMirror and as part of our new codebase we decided to go build free for JS libs, by either focusing on vanilla libs when suitable or leveraging native browser support of JS modules. The code below runs correctly as an npm package but fails when imported as a browser JS module.

Would there be anything that would prevent the use of CodeMirror in this context? And any idea how to fix this issue?

Thanks

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded

Like to the online sandbox

The code as an HTML/JS module

 <script type="module">
      import {
        basicSetup,
        EditorView
      } from 'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm'
      import {
        autocompletion
      } from 'https://cdn.jsdelivr.net/npm/@codemirror/autocomplete@6.18.6/+esm'
      import {
        schemaCompletionSource,
        sql
      } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-sql@6.8.0/+esm'


      const mySchema = {
        'my_table': [
          'id',
          'name',
          'email'
        ],
        'another_table': [
          'id',
          'description'
        ]
      };


      const sqlConfig = {
        defaultSchema: 'my_schema',
        defaultTable: 'another_table',
        schema: mySchema,
      };


      function myCompletions(context) {

        return schemaCompletionSource(sqlConfig)(context)
      }


      let myView = new EditorView({
        doc: `select * from users where age > 20`,
        extensions: [basicSetup, autocompletion({
          override: [myCompletions]
        }), sql(sqlConfig)],
        parent: document.getElementById('editor')
      })
    </script>
2

jsdelivr isn’t smart enough to deduplicate transitive dependencies, and will return a different files when, say, both @codemirror/autocomplete and @codemirror/lang-sql depend on @codemirror/state. That leads to a lot of wasted bandwidth, and the error you’re seeing. I recommend hosting your own version of the library rather than relying on a CDN.

3

Thanks for the prompt feedback @marijn.
Would that mean building the said version, self hosting it and then importing it?

4

For production, the easiest (and most performant) approach is to run a bundler that just combines all the modules you’re using into a big file. During development, something like Vite is probably the most practical.

5

Yes, that’s what we hoped we could get away from, but I understand the constraints.
Thanks for your support. :+1: