Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks. #613
Comments
|
These solutions are not working and are juste workaround... |
|
Got the same issue today after upgrading a bunch of codemirror related packages. Manually deleted |
|
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", |
|
I also ran into this issue while upgrading. Similar to virtuallyunknown's solution, I found out using After some patience and restarting the bundler, all was well with the world again. EDITI then found out that I was getting a new error I repeated the steps above for the
|
|
I saw this error in a different situation. 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" />
); |
|
Once I eliminated any possibility of multiple versions of It seems that the fix is to apply the same In the mean time, a workaround which worked for me was to force usage of the ESM version of 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. |
version：
code:
The text was updated successfully, but these errors were encountered: