Closed dungbv99 closed 2 years ago
@jaywcjlove Hopefully you can check it for me . Error happend in this file : https://github.com/uiwjs/react-codemirror/blob/master/src/useCodeMirror.ts#L80
I see the error message, not the error caused by codemirror
. @dungbv99
@dungbv99
@jaywcjlove sorry I have send wrong picture. I have updated this
@jaywcjlove Can you check again
I have check your code in IDE and something wrong like this @jaywcjlove
@jaywcjlove I have down grade uiw/code-mirror to version 3.2.7 and it is ok to run but something like color or code-mirror extension is not use. Hopefully when you update your live you can notice me to update new version. Thank you.
I have same problem. Did you solve this? @jaywcjlove @dungbv99
I have tried to create a basic project with a code mirror and an error still happened @dungbv99 @jaywcjlove
@jaywcjlove @NguyenTruongThanh-74 I have know this problem, when i run yarn add @uiw/react-codemirror --save or npm install @uiw/react-codemirror --save now it will install 1 node module in this package @uiw/react-codemirror so the duplicate is happened
I have the same problem. Hope it can be solved recently.
@dungbv99 upgrade @uiw/react-codemirror
to v4.2.3
@abc444873863 @NguyenTruongThanh-74 Seems to be a dependency problem. upgrade @uiw/react-codemirror
to v4.2.3
@jaywcjlove okay let me try it
@jaywcjlove I have check new version, The error is remove but the line number is disable.
I must remove /node_module/@uiw/react-codemirror/node_module
to show line number.
Can you check again.
You can tried my easy test source to check this bug.
https://github.com/dungbv99/react-code-mirror-error
@abc444873863 you can run rm -rf ./node_module/@uiw/react-codemirror/node_module
to temporary solve this problem
npm ls @codemirror/view
my-app@0.1.0 /Users/wangchujiang/git-project/@uiw/demo/react-code-mirror-error
├─┬ @codemirror/lang-javascript@0.19.3
│ ├─┬ @codemirror/autocomplete@0.19.6
│ │ ├─┬ @codemirror/tooltip@0.19.6
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/highlight@0.19.6
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/language@0.19.3
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/lint@0.19.3
│ │ ├─┬ @codemirror/gutter@0.19.5
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ ├─┬ @codemirror/panel@0.19.0
│ │ │ └── @codemirror/view@0.19.16 deduped
│ │ └── @codemirror/view@0.19.16 deduped
│ └── @codemirror/view@0.19.16
└─┬ @uiw/react-codemirror@4.2.3
├─┬ @codemirror/basic-setup@0.19.0
│ ├─┬ @codemirror/closebrackets@0.19.0
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/commands@0.19.5
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/comment@0.19.0
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/fold@0.19.1
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/history@0.19.0
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/matchbrackets@0.19.3
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/rectangular-selection@0.19.1
│ │ └── @codemirror/view@0.19.16 deduped
│ ├─┬ @codemirror/search@0.19.2
│ │ └── @codemirror/view@0.19.16 deduped
│ └── @codemirror/view@0.19.16 deduped
├─┬ @codemirror/theme-one-dark@0.19.1
│ └── @codemirror/view@0.19.16 deduped
└── @codemirror/view@0.19.15
=> @codemirror/view@0.19.15
@codemirror/view@0.19.16
@dungbv99 This is a problem caused by version locking.
@dungbv99 Upgrade @uiw/react-codemirror@4.2.4
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):
package.json
(note that this is a "resolutions"
key, NOT dependencies)
{
"resolutions": {
"@codemirror/highlight": "0.19.7",
"@codemirror/lang-javascript": "0.19.7",
"@codemirror/state": "0.19.9",
"@codemirror/view": "0.19.47"
}
}
I was having the same problem due to @codemirror/stream-parser being archived. now StreamParser must be imported from @codemirror/language
@jaywcjlove please update the readme.
@shubhendusaurabh Welcome to submit PR
I get it too with latest version. Actually even my current version which is deployed and working does not work on my laptop. Removing node_modules and package.lock.json do nothing.
In case you use npm and not Yarn, npm 8.3+ has Overrides (a similar feature to Yarn Resolutions).
If I understand the feature correctly, it should work similarly to what I posted above, but just use the key "overrides"
instead of "resolutions"
in your package.json
.
Would be super interested if this works for you!
Works like a charm, thank you, @karlhorky !
I had this error today by using codemirror with AlpineJs... I tried the resolution solution but I get these errors then
warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.2" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0" warning Resolution field "@codemirror/view@0.19.47" is incompatible with requested version "@codemirror/view@^0.20.0" warning Resolution field "@codemirror/state@0.19.9" is incompatible with requested version "@codemirror/state@^0.20.0"
Yeah, these warnings (they are not errors but warnings) can happen if you use a version incompatible with the version requested by your dependencies.
But they are just warning you about potential incompatibilities, the new versions seem to work fine with @uiw/react-codemirror
so far (in my testing)
For me, I used two components:
import CodeMirror from '@uiw/react-codemirror';
import { Sandpack } from '@codesandbox/sandpack-react';
And because of that I had the same issue. I’ve decided to try out pnpm
instead of npm
and it somehow resolved the issue!
You can find more here: https://discuss.codemirror.net/t/troubleshooting-article-for-cm6/2803/13
Yeah, these warnings (they are not errors but warnings) can happen if you use a version incompatible with the version requested by your dependencies.
But they are just warning you about potential incompatibilities, the new versions seem to work fine with
@uiw/react-codemirror
so far (in my testing)
Yes indeed they are just warnings, but then if I run the project I have a lot of 'No matching export ' errors and then crash...
Then I tried to use pnpm instead of npm or yarn as suggested above, and the original error came back...
That's really annoying can someone can share a working packages.json with me? If I understand correctly if I use correct versions of each packages it should work properly no?
By the way, I'm using vite, could it be related?
Guys, I am trying to use php
it give me this error:
import CodeMirror from '@uiw/react-codemirror';
// import { javascript } from '@codemirror/lang-javascript';
import { php } from '@codemirror/lang-php';
import { EditorView } from "@codemirror/view";
export default ({ changeHandler, ...otherProps }) => (
<CodeMirror
onChange={changeHandler}
extensions={[php()]}
{...otherProps}
/>
)
@nimatrazmjo Dependency versions must be consistent. check it out with npm ls @codemirror/view
Thank you @jaywcjlove, it was versioning issue
I have this Uncaught Error: Unrecognized extension value ...
error in an electron
project and have not been able to resolve it. I first encountered it when using codemirror-languageserver and worked around it by bringing its source code into my project. That is back on @codemirror/...@0.20.0
. It's now been brought to my attention that this issue appears again when upgrading to @codemirror/...@6.x.x
. I have a minimal example at codemirror-languageserver-issue15 that can be used to reproduce the issue. The work around this time is to update package.json
to pin @uiw/react-codemirror
to 4.8.1
i.e.
"dependencies": {
"@uiw/react-codemirror": "4.8.1",
...
}
If It is changed to 4.9.0
or higher the issue arises, but I cannot see anything obvious that has caused this between the v4.8.1
and v4.9.0
tags.
I originally raised this issue against the codemirror-languageserver
repo here where some further background information can be found. I have not been able to reproduce this on a normal browser (non-electron
) project. Any help would be appreciated.
I still get the error with most updated deps
"dependencies": {
"@codemirror/lang-javascript": "^6.1.0",
"@uiw/react-codemirror": "^4.12.4",
...
},
"overrides": {
"@codemirror/highlight": "0.19.8",
"@codemirror/lang-javascript": "^6.1.0",
"@codemirror/state": ">=6.0.0",
"@codemirror/view": ">=6.0.0"
},
I am building an electron app if that matters.
@dungbv99
@codemirror/highlight
As of 0.20.0, this package has been split between @lezer/highlight and @codemirror/language
Why is this issue marked as closed? I'm seeing this error when trying to run a unit test with vitest+testing-library/react.
I've tried every suggestion I've seen so far, things like locking packages to old version and manually installing specific codemirror deps.
I still face this error. Haizzz
@karlhorky You can provide an example that reproduces the error and I'll take a look at it for you.
The normal reason is a dependency version problem. Upgrade @codemirror/*
to v6+
I think you meant to tag @kmacoders, right?
Seeing this issue now after updating to latest
Broken with:
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lint": "^6.1.0",
"@uiw/react-codemirror": "^4.19.1",
Working with:
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lint": "^6.1.0",
"@uiw/react-codemirror": "4.11.6",
I tried it with every minor version between 4.12.*
and 4.19.*
and received the error on all of them.
Implementation:
export function Code({ code, setCode }: Props) {
const extensions = React.useMemo(
() => [json(), linter(jsonParseLinter())],
[],
)
return (
<ReactCodeMirror
extensions={extensions}
theme="light"
value={code}
onUpdate={(value) => {
if (value.docChanged) {
setCode(value.state.doc.toString())
}
}}
/>
)
}
Let me know if any other information would be helpful!
I had the same problem and this helped me:
remove any direct dependencies on raw codemirror (if any) (I have yarn):
yarn remove codemirror
rm -fr yarn.lock
rm -fr node_modules
yarn install
@vadimcoder Thanks! Reinstalling after following these steps seems to do the trick!
Hello, I fixed it by adding an alias in my webpack configuration
alias: { '@codemirror/state': __dirname + '/node_modules/@codemirror/state/dist/index.cjs', },
In my case with webpack + typescript changing tsconfig.json
module
from commonjs
to es2020
was the only thing that fixed the issue. (see https://github.com/codemirror/dev/issues/528)
In my case with webpack + typescript changing
tsconfig.json
module
fromcommonjs
toes2020
was the only thing that fixed the issue. (see codemirror/dev#528)
You are my hero man, only this stuff helps... thank you !
I am getting the same error but while testing my CodeEditor component with Vitest. Any suggestions?
I am also seeing this issue with @uiwjs/react-codemirror
and vitest
. This only happens when running tests, I have not seen the error in dev/production. I have a very minimal reproduction here:
https://github.com/SpaceCowboy326/react-codemirror-vitest
Just run npm run test
and it should fail with the error message in the thread description.
I'm also seeing this issue with @uiwjs/react-codemirror v4.20.0
and vitest v0.31.1
. I am using @testing-library/react v14.0.0
to render a component with Codemirror. My CodeMirror component is using the @nextjournal/lang-clojure v1.0.0
plugin.
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!