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 #613 (comment), 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.