react-textarea-code-editor: Bug: Code Editor + Jest not working
Hey! Thanks for this library.
The Code Editor does not work when using Jest. One reason is Jest not supporting import statements natively but what I am not understanding is that it should be using cjs - but it is not.
I created a down-to-earth, super-easy repository (it literally does nothing but importing your library and console.log). Just do npm i and run yarn jest to trigger jest.
https://github.com/activenode-bugs/uiw-react-textarea-code-editor-jest
You will see the error message of Cannot use import statement outside a module.
I googled this for hours and tried multiple things but maybe I’m overlooking something. It will always end up in trying to load unified from the rehype library with an import statement instead of going for a non-module approach.
What works (which is not a satisfying solution):
I’ve looked into your package folder which contains esm, cjs AND a dist folder. If you use jest with moduleNameMapper and then map @uiw/react-textarea-code-editor to @uiw/react-textarea-code-editor/dist/editor.js it will work / run.
moduleNameMapper: {
// if you use the following, it will work
// '@uiw/react-textarea-code-editor':
// '<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js',
},
But the question is WHY? My first thought then is: Shouldn’t your repo point main: "dist/editor.js" if this works seamlessly?
Which triggers my follow up question why there even is esm, cjs AND dist (can you clarify the differentiation?) and why does dist/editor.js work but cjs does not?
I feel like there is something weird going on which you can probably clarify as I am not as deep into this as you are 😃 Thank you so much in advance!
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 3
- Comments: 15 (4 by maintainers)
@swyftx-simon Actually, since this turned to show more problems the more “workarounds” we tried to add , we had a large discussion and there are only 3 things I can recommend simply because of their convenience:
Try:
Or else: We and the teams switched to vitest but also we switched to
@codemirroras we experienced more and more problems we couldn’t solve with thisreact-textarea-code-editor.@codemirroris freaking good but it’s documentation isn’t that easy. Everything’s an extension in the newest CodeMirror but feel free to ping me directly for further questions. We basically switched to CodeMirror and used theuseCodeMirrorhook as a basis.I get that. But many people that use react also use
jest. And sincejestdoes not natively supportESMmodules (only very experimental support) it leads to problems when it detects an import statement.And now I’m trying to figure out why this only happens with this specific library. I tried it with
react-simple-code-editorbefore and that one worked fine.And I was expecting this one to work fine as well because your
mainsayscjs/index.jsso it should (and does) point to the cjs file. However then again it somehow tries to access (somewhere in between)rehypepackage which then contains a import statement and I’m really trying hard to grasp the underlying problem as it really only appears with this library.