Problem importing `@uiw/react-codemirror

[pieterbeulque]

Cannot find module '@uiw/react-codemirror/esm/useCodeMirror' imported from @uiw/react-codemirror/esm/index.js

on a simple import CodeMirror from "@uiw/react-codemirror";.

This is a Remix project built with Vite 5. "type": "module" is set on my package.json.

This is the only package I have this issue with. Running on Node 22. On Node 20, I get Cannot use import statement outside a module.

This makes me think it has something to do with ESM / CJS / … module resolution going wrong, but I can't really debug it more than that.

If I do a dynamic import(), it works fine.

[fredericoo]

also having that issue, but hey thanks for the tip of dynamic importing it

[grabbou]

This issue occurs because outputted ESM imports files without extensions. Simply add .js to the import and it will work. You will have to do it for all the imports.

You can also configure your Vite to process those packages from source, here's what I've done and it works:

https://github.com/callstackincubator/flows-ai/blob/cd2176c055cea526099c2e53000f4159cb535516/docs/astro.config.mjs