Error with block comments in script tag in HTML

[shshaw]

In an editor using the HTML language extension, I get an error when adding a block comment /* */ in a <script> tag.

Input:

<script>
  /*
</script>

Error:

TypeError: Cannot read properties of undefined (reading 'from')

It specifically happens when adding the * after the /.

I cannot replicate it in this isolated CodeSandbox (is that good or bad?) using all the same package versions: CodeMirror: Script Comment in HTML - CodeSandbox

There’s potentially a problem with my specific setup, however I’ve stripped away every extension except for the HTML language extension and it still happens. The error stack trace is all coming from CodeMirror and lezer packages and not any of my code.

Any leads on what the cause could be?

[marijn]

Are you using the most recent version of all the @lezer and @codemirror packages (including transitive dependencies)? An issue like this was fixed a while ago.

[shshaw]

This was my resolutions in package.json to help enforce the latest versions (monorepo with multiple packages that use codemirror dependencies, so root level resolutions helps prevent some of these issues):

  "resolutions": {
    "@codemirror/autocomplete": "^6.9.0",
    "@codemirror/commands": "^6.2.4",
    "@codemirror/lang-css": "^6.2.0",
    "@codemirror/lang-html": "^6.4.5",
    "@codemirror/lint": "^6.3.0",
    "@codemirror/language": "^6.8.0",
    "@codemirror/language-data": "^6.3.1",
    "@codemirror/search": "^6.5.0",
    "@codemirror/state": "^6.2.1",
    "@codemirror/view": "^6.15.3",
}

I didn’t really have any lezer packages included here since I don’t really import and use those.

Running yarn list --pattern lezer gave this:

Updated resolutions to:

  "resolutions": {
    "@codemirror/autocomplete": "^6.9.0",
    "@codemirror/commands": "^6.2.4",
    "@codemirror/lang-css": "^6.2.0",
    "@codemirror/lang-html": "^6.4.5",
    "@codemirror/lint": "^6.3.0",
    "@codemirror/language": "^6.8.0",
    "@codemirror/language-data": "^6.3.1",
    "@codemirror/search": "^6.5.0",
    "@codemirror/state": "^6.2.1",
    "@codemirror/view": "^6.15.3",
    "codemirror": "^6.0.1",
    "@lezer/common": "^1.0.3",
    "@lezer/highlight": "^1.1.6",
    "@lezer/lr": "1.3.4"
  }

…and ended with consistency in the lezer packages.

The issue does seem to be solved now. The out of date or mismatched @lezer/lr versions seemed to be responsible.

Is there a better way to keep CodeMirror and Lezer packages up-to-date? It feels like a battle whenever I go to update. Forcing the latest versions with "resolutions" was the only way I could get things working properly.

[marijn]

yarn is terrible (and so are older versions of npm). Recent versions of npm seem to do a decent job keeping a tree deduplicated, though sometimes you’ll still have to kill your package lock and regenerate it from scratch.