JS error when editing some attributes

v6
1

Hello, I am having an issue probably due to my configuration ?
I am trying to use html language on a mirrorcode editor but i’m getting an error if i try to edit some tags attributes like ‘style’, ‘onload’ etc…

Here is the code to init the editor :

let editor = new EditorView({
            state: EditorState.create({
                doc: htmlCode,
                extensions: [
                    basicSetup,
                    html(), // Language support
                ],
            }),
            parent: $div,
        });

It is pretty basic i think but I can’t make it work correctly.

Error is Cannot read properties of undefined (reading 'some') within lezer/common

2

Can you show the output of npm ls -a | grep "@codemirror\|@lezer" for your project?

3

Sure, Here it is :

| +-- @codemirror/autocomplete@0.20.3
| | +-- @codemirror/language@0.20.2 deduped
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7 deduped
| | `-- @lezer/common@0.16.1
| +-- @codemirror/commands@0.20.0
| | +-- @codemirror/language@0.20.2 deduped
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7 deduped
| | `-- @lezer/common@0.16.1 deduped
| +-- @codemirror/language@0.20.2
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7 deduped
| | +-- @lezer/common@0.16.1 deduped
| | +-- @lezer/highlight@0.16.0
| | | `-- @lezer/common@0.16.1 deduped
| | +-- @lezer/lr@0.16.3
| | | `-- @lezer/common@0.16.1 deduped
| +-- @codemirror/lint@0.20.3
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7 deduped
| +-- @codemirror/search@0.20.1
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7 deduped
| +-- @codemirror/state@0.20.1
| `-- @codemirror/view@0.20.7
|   +-- @codemirror/state@0.20.1
+-- @codemirror/lang-html@6.4.9
| +-- @codemirror/autocomplete@6.18.4
| | +-- @codemirror/language@6.10.8 deduped
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| | `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/lang-css@6.3.1
| | +-- @codemirror/autocomplete@6.18.4
| | | +-- @codemirror/language@6.10.8 deduped
| | | +-- @codemirror/state@6.5.1 deduped
| | | +-- @codemirror/view@6.36.1
| | | | +-- @codemirror/state@6.5.1 deduped
| | | `-- @lezer/common@1.2.3 deduped
| | +-- @codemirror/language@6.10.8
| | | +-- @codemirror/state@6.5.1 deduped
| | | +-- @codemirror/view@6.36.1 deduped
| | | +-- @lezer/common@1.2.3 deduped
| | | +-- @lezer/highlight@1.2.1
| | | | `-- @lezer/common@1.2.3 deduped
| | | +-- @lezer/lr@1.4.2
| | | | `-- @lezer/common@1.2.3 deduped
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @lezer/common@1.2.3
| | `-- @lezer/css@1.1.9 deduped
| +-- @codemirror/lang-javascript@6.2.2
| | +-- @codemirror/autocomplete@6.18.4
| | | +-- @codemirror/language@6.10.8 deduped
| | | +-- @codemirror/state@6.5.1 deduped
| | | +-- @codemirror/view@6.36.1 deduped
| | | `-- @lezer/common@1.2.3 deduped
| | +-- @codemirror/language@6.10.8
| | | +-- @codemirror/state@6.5.1 deduped
| | | +-- @codemirror/view@6.36.1 deduped
| | | +-- @lezer/common@1.2.3 deduped
| | | +-- @lezer/highlight@1.2.1
| | | | `-- @lezer/common@1.2.3 deduped
| | | +-- @lezer/lr@1.4.2
| | | | `-- @lezer/common@1.2.3 deduped
| | +-- @codemirror/lint@6.8.4
| | | +-- @codemirror/state@6.5.1 deduped
| | | +-- @codemirror/view@6.36.1 deduped
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1
| | | +-- @codemirror/state@6.5.1 deduped
| | +-- @lezer/common@1.2.3
| | `-- @lezer/javascript@1.4.21
| |   +-- @lezer/common@1.2.3
| |   +-- @lezer/highlight@1.2.1
| |   | `-- @lezer/common@1.2.3 deduped
| |   `-- @lezer/lr@1.4.2
| |     `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/language@6.10.8
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| | +-- @lezer/common@1.2.3 deduped
| | +-- @lezer/highlight@1.2.1
| | | `-- @lezer/common@1.2.3 deduped
| | +-- @lezer/lr@1.4.2
| | | `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/state@6.5.1
| +-- @codemirror/view@6.36.1
| | +-- @codemirror/state@6.5.1 deduped
| +-- @lezer/common@1.2.3
| +-- @lezer/css@1.1.9
| | +-- @lezer/common@1.2.3
| | +-- @lezer/highlight@1.2.1
| | | `-- @lezer/common@1.2.3 deduped
| | `-- @lezer/lr@1.4.2
| |   `-- @lezer/common@1.2.3 deduped
| `-- @lezer/html@1.3.10
|   +-- @lezer/common@1.2.3
|   +-- @lezer/highlight@1.2.1
|   | `-- @lezer/common@1.2.3 deduped
|   `-- @lezer/lr@1.4.2
|     `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/autocomplete@6.18.4
| | +-- @codemirror/language@6.10.8 deduped
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| | `-- @lezer/common@1.2.3
| +-- @codemirror/commands@6.8.0
| | +-- @codemirror/language@6.10.8 deduped
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| | `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/language@6.10.8
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| | +-- @lezer/common@1.2.3 deduped
| | +-- @lezer/highlight@1.2.1
| | | `-- @lezer/common@1.2.3 deduped
| | +-- @lezer/lr@1.4.2
| | | `-- @lezer/common@1.2.3 deduped
| +-- @codemirror/lint@6.8.4
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| +-- @codemirror/search@6.5.8
| | +-- @codemirror/state@6.5.1 deduped
| | +-- @codemirror/view@6.36.1 deduped
| +-- @codemirror/state@6.5.1 deduped
| `-- @codemirror/view@6.36.1
|   +-- @codemirror/state@6.5.1 deduped
4

I’m seeing at least 8 instances of @codemirror/state in there. I guess you are using yarn? Switch to npm, or clear your package lock every time you upgrade, because yarn is really bad at deduplicating packages, and this library will not work well when you load some of it components multiple times (nor would you want to, since it wastes a lot of bandwidth).

5

I did install codemirror using npm

npm install codemirror
npm install @codemirror/basic-setup
npm install @codemirror/lang-html

I do also use yarn along with webpack

6

I managed to make it work. My mistake was to have installed @codemirror/basic-setup causing dependancies versions mismatch.

Thank you marijn for your pointers