NPM modules incorrectly interpreted as CJS #680
Description
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/@uiw+codemirror-theme-solarized@4.23.0_@codemirror+language@6.10.2_@codemirror+state@6.4.1_@codemirror+view@6.32.0/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 <wowohoo@qq.com>",
"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"
}
},