Error after updating lang-sql

After updating my codemirror/lang-sql from 6.5.0 to 6.6.4 (really need the auto-complete quotations you added thanks by the way for that). I am getting the following error:

Cannot read properties of undefined (reading ‘deserialize’):

setProp
node_modules/@lezer/lr/dist/index.js:1481

1478 | for (let i = 0; i < nodeNames.length; i++)  
1479 |     nodeProps.push([]);  
1480 | function setProp(nodeID, prop, value) {> 
1481 |     nodeProps[nodeID].push([prop, prop.deserialize(String(value))]);

I have tried updating all my dependencies to the latest versions:

"@codemirror/commands": "^6.6.0",
"@codemirror/lang-sql": "^6.6.4",
"@codemirror/language": "^6.10.2",
"@codemirror/state": "^6.4.1",
"@codemirror/view": "^6.27.0",
"@codemirror/autocomplete": "6.16.2",

Any advice on what might be going wrong here?

Many thanks in advance for any support,
Have a great day,
Pete

Which version of @lezer/common are you seeing when you run npm ls -a? This sounds like it’s using a pre-1.2 version (though @codemirror/lang-sql depends on 1.2 now)

1 Like

Thanks for the quick reply. You are correct, it looks like some of these packages are still referencing the old 1.0.3 version in their dependencies:

├─┬ codemirror@6.0.1
│ ├─┬ @codemirror/autocomplete@6.8.0
│ │ ├── @codemirror/language@6.8.0 deduped
│ │ ├── @codemirror/state@6.2.1 deduped
│ │ ├── @codemirror/view@6.13.2 deduped
│ │ └── @lezer/common@1.2.1
│ ├─┬ @codemirror/commands@6.2.4
│ │ ├── @codemirror/language@6.8.0 deduped
│ │ ├── @codemirror/state@6.2.1 deduped
│ │ ├── @codemirror/view@6.13.2 deduped
│ │ └── @lezer/common@1.0.3 deduped                     <===
│ ├─┬ @codemirror/language@6.8.0
│ │ ├── @codemirror/state@6.2.1 deduped
│ │ ├── @codemirror/view@6.13.2 deduped
│ │ ├── @lezer/common@1.0.3 deduped                     <===
│ │ ├── @lezer/highlight@1.1.6 deduped
│ │ ├── @lezer/lr@1.3.6 deduped
│ │ └── style-mod@4.0.3 deduped
...
├─┬ @codemirror/autocomplete@6.16.2
  │ ├── @codemirror/language@6.10.2 deduped
  │ ├── @codemirror/state@6.4.1 deduped
  │ ├── @codemirror/view@6.27.0 deduped
  │ └── @lezer/common@1.0.3                               <===
  ├─┬ @codemirror/commands@6.6.0
  │ ├─┬ @codemirror/language@6.8.0
  │ │ ├── @codemirror/state@6.2.1
  │ │ ├─┬ @codemirror/view@6.13.2
  │ │ │ ├── @codemirror/state@6.2.1 deduped
  │ │ │ ├── style-mod@4.0.3 deduped
  │ │ │ └── w3c-keyname@2.2.8 deduped
  │ │ ├── @lezer/common@1.0.3                              <===
  │ │ ├── @lezer/highlight@1.1.6 deduped
  │ │ ├── @lezer/lr@1.3.6 deduped
  │ │ └── style-mod@4.0.3 deduped
  │ ├── @codemirror/state@6.4.1 deduped
  │ ├── @codemirror/view@6.27.0 deduped
  │ └── @lezer/common@1.2.1
  ├─┬ @codemirror/lang-sql@6.6.4
  │ ├─┬ @codemirror/autocomplete@6.8.0
  │ │ ├── @codemirror/language@6.8.0 deduped
  │ │ ├── @codemirror/state@6.2.1 deduped
  │ │ ├─┬ @codemirror/view@6.13.2
  │ │ │ ├── @codemirror/state@6.2.1 deduped
  │ │ │ ├── style-mod@4.0.3 deduped
  │ │ │ └── w3c-keyname@2.2.8 deduped
  │ │ └── @lezer/common@1.2.1 deduped
  │ ├─┬ @codemirror/language@6.8.0
  │ │ ├── @codemirror/state@6.2.1 deduped
  │ │ ├── @codemirror/view@6.13.2 deduped
  │ │ ├── @lezer/common@1.0.3                               <===
  │ │ ├── @lezer/highlight@1.1.6 deduped
  │ │ ├── @lezer/lr@1.3.6 deduped
  │ │ └── style-mod@4.0.3 deduped
  │ ├── @codemirror/state@6.2.1
  │ ├── @lezer/common@1.2.1
  │ ├─┬ @lezer/highlight@1.1.6
  │ │ └── @lezer/common@1.0.3 deduped                       <===
  │ └─┬ @lezer/lr@1.3.6
  │   └── @lezer/common@1.0.3 deduped                       <===
  ├─┬ @codemirror/language@6.10.2
  │ ├── @codemirror/state@6.2.1
  │ ├── @codemirror/view@6.27.0 deduped
  │ ├── @lezer/common@1.2.1
  │ ├── @lezer/highlight@1.1.6 deduped
  │ ├── @lezer/lr@1.3.6 deduped
  │ └── style-mod@4.0.3
...
├─┬ @uiw/react-codemirror@4.22.1
  │ ├─┬ @babel/runtime@7.24.7
  │ │ └── regenerator-runtime@0.14.0
  │ ├── @codemirror/commands@6.6.0 deduped
  │ ├── @codemirror/state@6.4.1 deduped
  │ ├─┬ @codemirror/theme-one-dark@6.1.2
  │ │ ├─┬ @codemirror/language@6.8.0
  │ │ │ ├── @codemirror/state@6.2.1 deduped
  │ │ │ ├── @codemirror/view@6.13.2 deduped
  │ │ │ ├── @lezer/common@1.0.3 deduped                       <===
  │ │ │ ├── @lezer/highlight@1.1.6 deduped
  │ │ │ ├── @lezer/lr@1.3.6 deduped
  │ │ │ └── style-mod@4.0.3 deduped

So it looks like

If you’re using yarn, moving to npm (any halfway recent version) will probably make this problem go away.

Thanks, I am seeing the dependancies all using 1.2.1 after installing with npm rather than yarn. It causes a bunch of other problems, but not related to these packages. Thanks for helping me get to the bottom of the version issues.

Ok I’ve resolved the other package issues so I am now using version 6.6.4 of the @codemirror/lang-sql package :tada: but the autocomplete is still not adding the double quotes.

Do I have to specify a dialect as well?

Here’s a minimal example in code sandbox:

https://codesandbox.io/p/sandbox/react-16-8-forked-7fkmg4

EDIT: Just made a fix to the schema object but still seeing the issue.

I don’t think that feature does what you think it does. It’ll quote table names from object keys, but for completion objects that you directly provide, you’ll have to do the quoting yourself.

1 Like

Oh I see, I can just add a function to pre-process the schema I am fetching and add the quotes in myself for the columns, thank you so much for your assistance!