Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

[Reputation-Liberty]

version：

code:

[jaywcjlove]

@Reputation-Liberty

• Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. #216

[alimtunc]

@Reputation-Liberty

• Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. #216

These solutions are not working and are juste workaround...

[virtuallyunknown]

Got the same issue today after upgrading a bunch of codemirror related packages.

 "@uiw/codemirror-extensions-langs": "^4.21.21",
 "@uiw/codemirror-theme-github": "^4.21.21",
 "@uiw/codemirror-themes": "^4.21.21",
 "@uiw/react-codemirror": "^4.21.21",

Manually deleted node_modules and pnpm-lock.yaml, ran pnpm install once more and it worked again.

[Binlogo]

I used the "@codemirror/legacy-modes": "6.3.3", got the same issue, after update relative deps, fixed.

-  "@codemirror/legacy-modes": "6.3.3",
+ "@codemirror/legacy-modes": "6.4.0",

-  "@uiw/react-codemirror": "4.21.21",
+ "@uiw/react-codemirror": "^4.21.21",

[Jackman3005]

I also ran into this issue while upgrading. Similar to virtuallyunknown's solution, I found out using yarn why that there were indeed multiple @codemirror/state packages of different versions installed. I resolved the issue by deleting all references to @codemirror from my yarn.lock file. Deleting node_modules, doing a yarn cache clean and then reinstalling yarn install.

After some patience and restarting the bundler, all was well with the world again.

EDIT

I then found out that I was getting a new error r.resolveStack is not a function

I repeated the steps above for the @lezer/common library (per this suggestion) and I seem to be in a good state now.

yarn why @codemirror/state Before

$ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^16.6"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^20.3.1"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^12.20.10"
warning Resolution field "@types/express@4.17.11" is incompatible with requested version "@types/express@^4.17.13"
warning Resolution field "@types/serve-static@1.13.9" is incompatible with requested version "@types/serve-static@
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^14.11.8"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^15.6.2"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.1.0"
info Has been hoisted to "@codemirror/state"
info Reasons this module exists
   - "workspace-aggregator-938e77fa-e8b0-4e52-b2b5-e6bf5bed930a" depends on it
   - Hoisted from "_project_#@codemirror#commands#@codemirror#state"
   - Hoisted from "_project_#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#@codemirror#view#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#autocomplete#@codemirror#state
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#lint#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#theme-one-dark#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirr
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#codemirror#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirr
info Disk size without dependencies: "388KB"
info Disk size with unique dependencies: "388KB"
info Disk size with transitive dependencies: "388KB"
info Number of shared dependencies: 0
=> Found "@uiw/react-codemirror#@codemirror/state@6.4.1"
info Reasons this module exists
   - "_project_#@questmate#app#@uiw#react-codemirror" depends on it
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#commands#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#commands#@codemirror#view#@codemirror#state"
info Disk size without dependencies: "456KB"
info Disk size with unique dependencies: "456KB"
info Disk size with transitive dependencies: "456KB"
info Number of shared dependencies: 0
=> Found "@codemirror/lang-javascript#@codemirror/view#@codemirror/state@6.4.1"
info This module exists because "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#view" depends on it.
info Disk size without dependencies: "456KB"
info Disk size with unique dependencies: "456KB"
info Disk size with transitive dependencies: "456KB"
info Number of shared dependencies: 0
✨  Done in 0.74s.

yarn why @codemirror/state After

$ yarn why @codemirror/state
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@codemirror/state"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^16.6"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^20.3.1"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^12.20.10"
warning Resolution field "@types/express@4.17.11" is incompatible with requested version "@types/express@^4.17.13"
warning Resolution field "@types/serve-static@1.13.9" is incompatible with requested version "@types/serve-static@^1.13.10"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^14.11.8"
warning Resolution field "@types/node@18.17.14" is incompatible with requested version "@types/node@^15.6.2"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@codemirror/state@6.4.1"
info Reasons this module exists
   - "_project_#@questmate#app#@codemirror#lang-javascript" depends on it
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#autocomplete#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#language#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#lint#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#theme-one-dark#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#codemirror#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@codemirror#commands#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@codemirror#lang-javascript#@codemirror#view#@codemirror#state"
   - Hoisted from "_project_#@questmate#app#@uiw#react-codemirror#@uiw#codemirror-extensions-basic-setup#@codemirror#search#@codemirror#state"
info Disk size without dependencies: "456KB"
info Disk size with unique dependencies: "456KB"
info Disk size with transitive dependencies: "456KB"
info Number of shared dependencies: 0
✨  Done in 0.73s.

[antal-bukos]

I saw this error in a different situation.
I'm using this library to create a code editor component for a component library we use on the project. We also have a custom syntax definition with syntax highlighting. Everything worked fine in the storybook of the library but showed this error when trying to use the component in the main project.
The setup looked something like

in file that contained the syntax definition

import {LanguageSupport, StreamLanguage, HighlightStyle, syntaxHighlighting} from '@codemirror/language';
import {tags as t} from '@lezer/highlight';

...
const highlightStyle = HighlightStyle.define([
  {tag: t.number, class: 'cm-number'},
  {tag: t.string, class: 'cm-string'},
  {tag: t.operator, class: 'cm-operator'},
  {tag: t.variableName, class: 'cm-variable'},
  {tag: t.bool, class: 'cm-bool'},
  {tag: t.null, class: 'cm-null'},
  {tag: t.function(t.variableName), class: 'cm-builtin'},
  {tag: t.comment, class: 'cm-comment'},
  {tag: t.keyword, class: 'cm-keyword'},
]);

export function someLang(variables: Set<string>) {
  return new LanguageSupport(language(variables), syntaxHighlighting(highlightStyle));
}

and then in the component

import Editor from '@uiw/react-codemirror';
import {createTheme} from '@uiw/codemirror-themes';
import {tags as t} from '@lezer/highlight';

const theme = createTheme({
    theme: 'light',
    settings: {},
    styles: [
      {tag: t.comment, color: '#28292D', fontStyle: 'italic'},
      {tag: t.variableName, color: '#c700c4', fontWeight: 'bold'},
      {tag: t.string, color: '#144914'},
      {tag: t.number, color: '#9b7739'},
      {tag: t.bool, color: '#ef4b3f'},
      {tag: t.null, color: '#a70202'},
      {tag: t.keyword, color: 'red', backgroundColor: '#f8d7da'},
      {tag: t.operator, color: '#1485ba'},
      {tag: t.function(t.variableName), color: '#0351f9'},
      {tag: t.bracket, color: '#032d89'},
    ],
});

return (
  <Editor extensions={[someLang(new Set(['']))]} theme={theme} />
);

After removing the theme and custom extension it looked like the error was caused by the theme so I tried moving some things around. This ended up working:

in file that contained the syntax definition

import {LanguageSupport, StreamLanguage, HighlightStyle, syntaxHighlighting} from '@codemirror/language';
import {tags as t} from '@lezer/highlight';

...
const highlightStyle = HighlightStyle.define([
  {tag: t.number, color: '#9b7739'},
  {tag: t.string, color: '#144914'},
  {tag: t.operator, color: '#1485ba'},
  {tag: t.variableName, color: '#c700c4', fontWeight: 'bold'},
  {tag: t.bool, color: '#ef4b3f'},
  {tag: t.null, color: '#a70202'},
  {tag: t.function(t.variableName), color: '#0351f9'},
  {tag: t.comment, color: '#28292D', fontStyle: 'italic'},
  {tag: t.keyword, color: 'red', backgroundColor: '#f8d7da'},
]);
...

and then in the component

import Editor from '@uiw/react-codemirror';

// removed theme variable

return (
  <Editor extensions={[someLang(new Set(['']))]} theme="light" />
);

[aspiers]

Once I eliminated any possibility of multiple versions of @codemirror/state being installed, I traced the cause of this to both the ESM and CommonJS versions of @codemirror/state 6.5.0 being loaded during the same run. So the FacetProvider class gets defined twice, and instances of the two mixed together, causing a failing instanceof check as mentioned in codemirror/dev#608.

It seems that the fix is to apply the same exports field to themes/theme/package.json which was already applied to the core and basic setup package.json files in #692.

In the mean time, a workaround which worked for me was to force usage of the ESM version of @uiw/codemirror-themes:

const viteConfig = defineViteConfig({
  resolve: {
    alias: {
      '@uiw/codemirror-themes': path.resolve(
        __dirname,
        'node_modules/@uiw/codemirror-themes/esm/index.js',
      ),
    },
  },
  ...
});

Strangely, this is the opposite of what was suggested in #216, i.e. to force usage of the CJS versions of modules. I guess the important thing is to pick one or the other out of CJS and ESM and remain consistent.