Language Description type mismatch

[shshaw]

I updated CodeMirror dependencies using Yarn 4.1.1 and now I’m getting this weird TypeScript error.

Code:

export const htmlLanguage = languages.find((lang) => lang.name === 'HTML');

Error:

The inferred type of ‘htmlLanguage’ cannot be named without a reference to ‘@codemirror/lang-javascript/node_modules/@codemirror/language’. This is likely not portable. A type annotation is necessary.ts(2742)

Here are the package changes. Relatively minor.

Looks like @codemirror/lang-javascript uses "@codemirror/language": "^6.6.0" and @codemirror/language-data uses "@codemirror/language": "^6.0.0" but that wasn’t a problem before and should all resolve properly.

TypeScript thinks everything’s okay if I add this import, but that’s a brittle, weird import.

import { type LanguageDescription as jsLanguageDescription } from '@codemirror/lang-javascript/node_modules/@codemirror/language';

Any ideas as to what the problem could be?

[marijn]

I recommend you stop using yarn. Clearing your package lock and reinstalling will fix this, but when upgrading packages yarn will randomly duplicate versions and produce issues like this. Recent versions of npm don’t have this issue.

[shshaw]

Unfortunately a bit tied up with yarn workspaces and such in a big monorepo. Can’t migrate away at this time.

Removing all of the codemirror packages and dependencies then reinstalling seems to have done the trick for now. Thank you.

[Danon]

@marijn Is right that yarn randomly mismatches versions.

But you can sidestep the issue by marking most of your @codemirror/ packages with version * except the important ones like @codemirror/state and @codemirror/view. It worked for me.