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"
     }
   },