uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.65k stars 132 forks source link

Error: JSX element type 'CodeMirror' does not have any construct or call signatures #610

Closed virtuallyunknown closed 10 months ago

virtuallyunknown commented 10 months ago

Greetings!

I am trying to give this library a try, but when I try the example provided I get the following errors:

JSX element type 'CodeMirror' does not have any construct or call signatures.

and

'CodeMirror' cannot be used as a JSX component.
  Its type 'typeof import("/home/user/projects/react-codemirror-error/node_modules/@uiw/react-codemirror/cjs/index")' is not a valid JSX element type.

My project is using Typescript and ESM ("type": "module" in package.json). I created a bare-minimum reproducible repository here and you can see the error at src/index.tsx:

https://github.com/virtuallyunknown/react-codemirror-error

Any idea what might be causing this? I've searched for similar issues but I couldn't find anything.

Cheers!


EDIT: Okay, I managed to get it working with the useCodeMirror hook instead.

jaywcjlove commented 10 months ago

@virtuallyunknown How do I run your example?

You can refer to the following example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-language-rz4rh?fontsize=14&hidenavigation=1&theme=dark

virtuallyunknown commented 10 months ago

@jaywcjlove hey I apologize if this wasn't clear enough, but there is nothing to run, it's not a runtime issue. The issue is only at compile time, it's a type issue.

So to reproduce it you just clone the repository, run npm install and then open the src/index.tsx file in your code editor, then you will see this:

image psd

The example you have kindly provided is plain javascript. But this is types/typescript issue specifically. I should also mention that I have no issue compiling/bundling my code (I'm using esbuild).

Cheers!

jaywcjlove commented 10 months ago

@virtuallyunknown modify tsconfig.json

-        "module": "NodeNext",
+        "module": "ESNext",
-        "moduleResolution": "NodeNext",
+        "moduleResolution": "Bundler",
virtuallyunknown commented 10 months ago

@jaywcjlove very interesting, thank you. This seems to fix the problem, and if I recall correctly Bundler was introduced in TypeScript 5.2 so I need to do some further reading on it.

Cheers again!