(Resolved) Updating CodeMirror packages from `6.0.0` to latest versions causes build errors

After making the following changes to my package.json, my project no longer builds,

diff --git a/packages/app-mobile/package.json b/packages/app-mobile/package.json
index 6dc3b2063..c81791186 100644
--- a/packages/app-mobile/package.json
+++ b/packages/app-mobile/package.json
@@ -74,19 +74,19 @@
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
-    "@codemirror/commands": "^6.0.0",
-    "@codemirror/lang-cpp": "^6.0.0",
-    "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/commands": "^6.1.0",
+    "@codemirror/lang-cpp": "^6.0.1",
+    "@codemirror/lang-html": "^6.1.0",
     "@codemirror/lang-java": "^6.0.0",
-    "@codemirror/lang-javascript": "^6.0.0",
-    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/lang-javascript": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.0.1",
     "@codemirror/lang-php": "^6.0.0",
     "@codemirror/lang-rust": "^6.0.0",
-    "@codemirror/language": "^6.0.0",
+    "@codemirror/language": "^6.2.1",
     "@codemirror/legacy-modes": "^6.1.0",
-    "@codemirror/search": "^6.0.0",
-    "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.0.0",
+    "@codemirror/search": "^6.2.0",
+    "@codemirror/state": "^6.1.1",
+    "@codemirror/view": "^6.2.2",
     "@joplin/tools": "~2.9",
     "@lezer/highlight": "^1.0.0",
     "@types/fs-extra": "^9.0.13",

I’m using TypeScript and am now getting a large number of type assignment errors. The project builds fine with the old package.json. I’m bundling with Webpack.

Abridged build log
[05:10:27] Requiring external module ts-node/register
[05:10:29] Using gulpfile ~/Documents/Build/joplin/packages/app-mobile/gulpfile.ts
[05:10:29] Starting 'build'...
[05:10:29] Starting 'buildInjectedJs'...
Building bundle: codeMirrorBundle...
Errors:  81
Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(126,50)
      TS2345: Argument of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").EditorState' is not assignable to parameter of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").EditorState'.
  The types of 'selection.ranges' are incompatible between these types.
    Type 'readonly import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").SelectionRange[]' is not assignable to type 'readonly import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").SelectionRange[]'.
      Type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").SelectionRange' is not assignable to type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").SelectionRange'.
        Types have separate declarations of a private property 'flags'.
    at makeError (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:93:19)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:63:27
    at Array.map (<anonymous>)
    at formatErrors (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:46:14)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:153:66
    at Array.forEach (<anonymous>)
    at provideErrorsToWebpack (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:150:31)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:36:9
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/instances.js:203:13
    at fn (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/webpack/lib/Compilation.js:478:10)

Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(130,53)
      TS2345: Argument of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").EditorState' is not assignable to parameter of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").EditorState'.
...

Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(131,53)
      TS2345: Argument of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").EditorState' is not assignable to parameter of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").EditorState'.
...

Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(159,14)
      TS2345: Argument of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").EditorState' is not assignable to parameter of type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").EditorState'.
 ...

Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(262,3)
      TS2322: Type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").EditorState' is not assignable to type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").EditorState'.
  The types of 'selection.ranges' are incompatible between these types.
    Type 'readonly import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").SelectionRange[]' is not assignable to type 'readonly import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").SelectionRange[]'.
      Type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/state/dist/index").SelectionRange' is not assignable to type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/state/dist/index").SelectionRange'.
        Types have separate declarations of a private property 'flags'.
    at makeError (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:93:19)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:63:27
    at Array.map (<anonymous>)
    at formatErrors (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:46:14)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:153:66
    at Array.forEach (<anonymous>)
    at provideErrorsToWebpack (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:150:31)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:36:9
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/instances.js:203:13
    at fn (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/webpack/lib/Compilation.js:478:10)

Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts(273,6)
      TS2322: Type 'LanguageDescription[]' is not assignable to type 'readonly LanguageDescription[] | ((info: string) => LanguageDescription | Language)'.
  Type 'LanguageDescription[]' is not assignable to type 'readonly LanguageDescription[]'.
    Type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/language/dist/index").LanguageDescription' is not assignable to type 'import("/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/@codemirror/legacy-modes/node_modules/@codemirror/language/dist/index").LanguageDescription'.
      Types have separate declarations of a private property 'loadFunc'.
    at makeError (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:93:19)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:63:27
    at Array.map (<anonymous>)
    at formatErrors (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:46:14)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:153:66
    at Array.forEach (<anonymous>)
    at provideErrorsToWebpack (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:150:31)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:36:9
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/instances.js:203:13
    at fn (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/webpack/lib/Compilation.js:478:10)


... similar errors for other types ...


Error: [tsl] ERROR in /home/builder/Documents/Build/joplin/packages/app-mobile/components/NoteEditor/CodeMirror/syntaxHighlightingLanguages.ts(216,3)
      TS2322: Type 'StreamParser<unknown>' is not assignable to type 'StreamParser<any>'.
    at makeError (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:93:19)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:63:27
    at Array.map (<anonymous>)
    at formatErrors (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/utils.js:46:14)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:153:66
    at Array.forEach (<anonymous>)
    at provideErrorsToWebpack (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:150:31)
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/after-compile.js:36:9
    at /home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/ts-loader/dist/instances.js:203:13
    at fn (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/webpack/lib/Compilation.js:478:10)

[05:11:08] 'buildInjectedJs' errored after 39 s
[05:11:08] Error: Promise rejected without Error
    at onError (/home/builder/Documents/Build/joplin/packages/app-mobile/node_modules/async-done/index.js:49:15)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
[05:11:08] 'build' errored after 39 s

Many (all?) of the errors seem to relate to @codemirror/legacy-modes, which I have not updated.

I’ve tried deleting node_modules/ and re-installing. How should I approach fixing this?

Did npm duplicate a bunch of packages? Does clearing your package lock and reinstalling help?

1 Like

That fixed it. Thank you!