Closed dungbv99 closed 2 years ago
@somecho https://discuss.codemirror.net/t/error-multiple-instances-of-codemirror-state/5174/2 looks unsolvable
I had the same problem and this helped me:
1. remove any direct dependencies on raw codemirror (if any) (I have yarn): `yarn remove codemirror` 2. `rm -fr yarn.lock` 3. `rm -fr node_modules` 4. `yarn install`
For posterity, this is the solution that worked for me. My problem specifically was that minimalSetup
and basicSetup
are functions in newer versions so they break older versions.
Just playing around with a very basic hello world via URL imports, and ran into this problem. Downgrading theme-one-dark@6.1.2
to 6.1.1
fixed it for me. Here's a minimal reproduction in case a dev here wants to take a look:
<script type="module">
import {EditorState} from "https://cdn.jsdelivr.net/npm/@codemirror/state@6.2.1/+esm";
import {EditorView, keymap} from "https://cdn.jsdelivr.net/npm/@codemirror/view@6.19.0/+esm";
// upgrading this to `6.1.2` causes this: "Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks"
import { oneDark } from "https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.1.1/+esm";
let startState = EditorState.create({
doc: "Hello World",
extensions: [
oneDark,
],
});
let view = new EditorView({
state: startState,
parent: document.body,
});
</script>
(if URL imports like this aren't generally supported, then that's just tragic imo - makes it hard to play around with e.g. codepen/jsbin, create little demos, etc.)
We fixed this in our application by adding a Yarn Resolution to force a single version of
@codemirror/state
(actually, we already had resolutions of a lot of other CodeMirror packages too, to fix similar breakages):
Building on my comment above, if you are also using @mischnic/json-sourcemap
, which uses an outdated version of @lezer/common
and @lezer/lr
and also Renovate Bot or similar to upgrade your dependencies, then you can guide Yarn Resolutions to choose the right versions like this:
{
"resolutions": {
"**/@mischnic/json-sourcemap/@lezer/common": "0.15.12",
"**/@mischnic/json-sourcemap/@lezer/lr": "0.15.8",
"**/@codemirror/autocomplete/@lezer/common": "1.1.0",
"**/@codemirror/commands/@lezer/common": "1.1.0",
"**/@codemirror/lang-javascript/@lezer/common": "1.1.0",
"**/@codemirror/language/@lezer/common": "1.1.0",
"**/@codemirror/language/@lezer/lr": "1.3.11"
}
}
Otherwise, the automatic dependency version upgrades from the bots will cause CodeMirror to break - eg. by losing syntax highlighting.
any one using pnpm and next.js following solution worked for me
rm -rf node_modules pnpm-lock.yaml
rm -rf .next
pnpm i
Hi, I am getting the same error with the latest @uiw/react-codemirror 4.21.21 and @codemirror/lang-sql 6.5.5.
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks
Is there any real fix for this issue? @jaywcjlove
@RajkiranJogu Were you able to solve it? Got the same issue ;/
Hello, I fixed it by adding an alias in my webpack configuration
alias: { '@codemirror/state': __dirname + '/node_modules/@codemirror/state/dist/index.cjs', },
React 18 + Webpack 5. Very basic setup. The webpack alias trick was the only thing that worked for me.
"@codemirror/lang-html": "^6.4.8",
"@uiw/react-codemirror": "^4.21.25",
---
import CodeMirror from "@uiw/react-codemirror";
import { html } from "@codemirror/lang-html";
...
<CodeMirror
value={customHtml}
height="200px"
extensions={[html()]}
onChange={value => {
setCustomHtml(value);
}}
/>
I was able to solve it using vitest
by adding the following lines
alias: {
'@codemirror/state': path.resolve(
__dirname,
'./node_modules/@codemirror/state/dist/index.cjs'
),
'@codemirror/lang-yaml': path.resolve(
__dirname,
),
'@codemirror/lang-json': path.resolve(
__dirname,
'./node_modules/@codemirror/lang-json/dist/index.cjs'
)
}
Basically, you need to force the CJS version of @codemirror/state
and all other packages depending on it.
Ultimately, If you are using vite as project build tool, you should use these configuration,
// vite.config.js
import { defineConfig } from 'vite';
import path from "path";
export default defineConfig({
optimizeDeps: {
include: ['@codemirror/state', '@codemirror/view'],
},
resolve: {
alias: {
'@codemirror/state': path.resolve(
__dirname,
'./node_modules/@codemirror/state/dist/index.cjs'
),
'@codemirror/lang-yaml': path.resolve(
__dirname,
),
'@codemirror/lang-json': path.resolve(
__dirname,
'./node_modules/@codemirror/lang-json/dist/index.cjs'
)
}
},
})
// package.json
{
"name": "js-vite-cm-demo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.2.0"
},
"dependencies": {
"@codemirror/basic-setup": "^0.20.0",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/state": "^6.4.1",
"@codemirror/theme-one-dark": "^6.1.2",
"@codemirror/view": "^6.26.3",
"codemirror": "^6.0.1"
}
}
I have a project using uiw/react-codemirror version 4.0.6 It is run okay until mid night yesterday, when I clone my project and re install it. When it start some thing wrong is happended like this picture
I think some bug happend when you update new version confile with the codemirror dependency. Can you check for me? Thank you!