Bug: Code Editor + Jest not working about react-textarea-code-editor

[activenode]

I get that. But many people that use react also use jest. And since jest does not natively support ESM modules (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-editor before and that one worked fine.

And I was expecting this one to work fine as well because your main says cjs/index.js so it should (and does) point to the cjs file. However then again it somehow tries to access (somewhere in between) rehype package 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.

[activenode]

@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:

• Switch on experimental ESM support in Jest (https://jestjs.io/docs/ecmascript-modules)
• Switch to vitest which in many cases is super low effort because it's mainly compatible to Jest

Or else:
We and the teams switched to vitest but also we switched to @codemirror as we experienced more and more problems we couldn't solve with this react-textarea-code-editor .

@codemirror is 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 the useCodeMirror hook as a basis.

[activenode]

You'll find easy reproduction steps in the README file of https://github.com/activenode-bugs/uiw-react-textarea-code-editor-jest

[jaywcjlove]

@activenode

• dist The ones in dist belong to UMD, UMD builds can be used directly in the browser via a <script> tag. Example
• cjs CommonJS: CommonJS builds are intended for use with older bundlers like browserify or webpack 1. The default file for these bundlers (pkg.main) is the Runtime only CommonJS build
• esm ES Module: ES module builds are intended for use with modern bundlers like webpack 2 or rollup. The default file for these bundlers (pkg.module) is the Runtime only ES Module build

[activenode]

Thanks for clarifying the difference. Can you imagine why the error of import appears even though commonjs shouldn't lead to that? Like this is really confusing. I've tried it in at least 5 different setups, with and without TypeScript, with and without nextjs and it's always the exact same thing.

Once you are using your library anywhere with jest (no matter if just jest, babel-jest or ts-jest or both) it will always lead to this exact problem that you face when you run the related repo.

[jaywcjlove]

The current repo test case is running fine, it has nothing to do with the library. This has a lot to do with build tools.
@activenode

[activenode]

Okay so rehype package only contains ESM and that is why your library (which has rehype as dependency) will not work in this context as rehype doesn't have the cjs version apparently.

[activenode]

The official documentation confirms that

https://www.npmjs.com/package/rehype#compatibility

Which implies your package essentially can only support ESM as it depends on rehype. Your CJS version essentially mixes with ESM

[activenode]

So I can see 3 possible options here:

1. Remove CJS support in your library (as it won't work together with rehype)
2. Pre-compile rehype with the CJS version for the cjs dist
3. Use a different package than rehype

If you choose option 1 that's completely fine, I just need the transparency so that I can switch back to our old react-simple-code-editor

Thank you so much!

[jaywcjlove]

react-textarea-code-editor/package.json

Lines 56 to 58 in 9288db6

	"transformIgnorePatterns": [
	"<rootDir>/node_modules/?!(.*)"
	],

Can be used together, depending on the build tool and your code. Iteration takes a while and is not that aggressive at the moment.

@activenode

It has some ways to do compatibility.

[activenode]

Thanks for the hints.

[jaywcjlove]

https://github.com/jaywcjlove/markdown-to-html-cli

This is also a solution.
jest test cases are separated from pkg.

@activenode

[activenode]

Thank you, I will look into the suggestions.

[simon-v-swyftx]

Hey @activenode which suggestion did you end up going with?

[CiprianDraghici]

I managed to fix this issue by changing the import.

Instead of
import CodeEditor from '@uiw/react-textarea-code-editor';

used:
import CodeEditor from '@uiw/react-textarea-code-editor/esm';