NPM modules incorrectly interpreted as CJS

[double-thinker]

As you can see here or here the package.json could mislead Node.js into load index.js as ESM which triggers the following error:

.../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]/node_modules/@uiw/codemirror-theme-solarized/esm/index.js:1
export * from './dark';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)

I cannot provide a reproduction but it happens in Vite when rendering SSR (I know this is not expected). Seems like affects other packages. This snippet also fails in SSR:

import CodeMirror, { keymap } from '@uiw/react-codemirror'

// ...
<CodeMirror>

React fails to render it because it is a not expected object (we are getting the CJS module instead of the render function. As a workaroung you can use <CodeMirror.default> and patch the package.json for the packages you need.

diff --git a/package.json b/package.json
index fe8aadc867807afc82b0c3da430ccaf34c76eb0d..7ebea0e2532cf44e1e6a85374cc68bb135e70f10 100644
--- a/package.json
+++ b/package.json
@@ -7,22 +7,22 @@
   "author": "kenny wong <[email protected]>",
   "license": "MIT",
   "main": "./cjs/index.js",
-  "module": "./esm/index.js",
+  "module": "./src/index.ts",
   "exports": {
     "./README.md": "./README.md",
     ".": {
-      "import": "./esm/index.js",
       "types": "./cjs/index.d.ts",
+      "import": "./src/index.ts",      
       "require": "./cjs/index.js"
     },
     "./light": {
-      "import": "./esm/light.js",
       "types": "./cjs/light.d.ts",
+      "import": "./src/light.ts",      
       "require": "./cjs/light.js"
     },
     "./dark": {
-      "import": "./esm/dark.js",
       "types": "./cjs/dark.d.ts",
+      "import": "./src/dark.ts",      
       "require": "./cjs/dark.js"
     }
   },

[aspiers]

As mentioned in https://github.com/uiwjs/react-codemirror/issues/613#issuecomment-2544272857, I have found this to be a cause of #613 (and probably #216 too in some cases).

The fix in #692 of adding exports to package.json needs to be applied to other package.json files, not just the ones done in that PR.

[curran]

I'm getting some related errors:

(node:100661) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/curran/repos/vizhub3/node_modules/@uiw/codemirror-theme-okaidia/esm/index.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /home/curran/repos/vizhub3/node_modules/@uiw/codemirror-theme-okaidia/package.json.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:100661) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/curran/repos/vizhub3/node_modules/@uiw/codemirror-themes/esm/index.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /home/curran/repos/vizhub3/node_modules/@uiw/codemirror-themes/package.json.
(node:100661) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/curran/repos/vizhub3/node_modules/@uiw/codemirror-theme-abcdef/esm/index.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /home/curran/repos/vizhub3/node_modules/@uiw/codemirror-theme-abcdef/package.json.
(node:100661) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/curran/repos/vizhub3/node_modules/@uiw/codemirror-theme-dracula/esm/index.js is not specified and it doesn't parse as CommonJS.

The error message suggests to specify "type": "module" in package.json.

https://github.com/uiwjs/react-codemirror/blob/master/themes/abcdef/package.json

There is currently no "type": "module" in package.json.

[trebeljahr]

I get a similar/related error on 4.23.10 which doesn't happen on 4.23.8

I just pinned the version number in my package.json for now but still a patch change shouldn't break things like this :(

Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/@uiw/codemirror-extensions-basic-setup/cjs/index.js from /vercel/path0/node_modules/@uiw/react-codemirror/cjs/getDefaultExtensions.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /vercel/path0/node_modules/@uiw/codemirror-extensions-basic-setup/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
    at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/vercel/path0/node_modules/@uiw/react-codemirror/cjs/getDefaultExtensions.js:11:39)
    at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/vercel/path0/node_modules/@uiw/react-codemirror/cjs/useCodeMirror.js:13:29)
    at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/vercel/path0/node_modules/@uiw/react-codemirror/cjs/index.js:14:23)
    at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
    at 89179 (/vercel/path0/.next/server/pages/[id].js:1:3605)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:127)
    at /vercel/path0/.next/server/chunks/93.js:1:4436
    at t.a (/vercel/path0/.next/server/webpack-runtime.js:1:866)
    at 5234 (/vercel/path0/.next/server/chunks/93.js:1:4359)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:127)