react
react copied to clipboard
phosphor-icons
Import issues with ESM and CJS
Describe the bug
I think in the last few releases there's been a degradation in the import resolution for this package.
I first encountered issues with "ReferenceError: exports is not defined" when running vitest in my project. @phosphor-icons/react is a dependency of a package I'm using, so it took me a bit to figure out where/why I was hitting this issue. It could also be an issue of the consuming package but I've also noticed just downgrading to 2.1.8 works.
Steps to Reproduce
I am using https://arethetypeswrong.github.io/ to illustrate the issue while I work on creating a minimal repo with reproduction steps (its not trivial, because I think I need to create some mix of ESM / CJS scenario to hit the issue).
Expected behavior
Clean imports without errors
Screenshots
2.1.8 looks decent
pnpm attw --pack .
@phosphor-icons/react v2.1.8
Build tools:
- @arethetypeswrong/cli@^0.18.1
- typescript@^5.8.3
- vite@^6.3.5
🐛 Import resolved to types through a conditional package.json export, but only after failing to resolve through an earlier condition. This behavior is a TypeScript bug (https://github.com/microsoft/TypeScript/issues/50762). It may misrepresent the runtime behavior of this import and should not be relied upon. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FallbackCondition.md
🚭 Syntax detected in the module is incompatible with the module kind according to the package.json or file extension. This is an error in Node and may cause problems in some bundlers. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/UnexpectedModuleSyntax.md
┌──────────────────────────────────────┬────────────┬───────────────────┬─────────────────────────────┬────────────────────────────┐
│ │ node10 │ node16 (from CJS) │ node16 (from ESM) │ bundler │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react" │ 🟢 │ 🟢 (CJS) │ 🐛 Used fallback condition │ 🐛 Used fallback condition │
│ │ │ │ 🚭 Unexpected module syntax │ │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/icons/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/csr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/lib/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr" │ 🟢 │ 🟢 (CJS) │ 🐛 Used fallback condition │ 🐛 Used fallback condition │
│ │ │ │ 🚭 Unexpected module syntax │ │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/package.json" │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │
├──────────────────────────────────────┼────────────┼───────────────────┼─────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
└──────────────────────────────────────┴────────────┴───────────────────┴─────────────────────────────┴────────────────────────────┘
pnpm dlx @arethetypeswrong/cli --pack .
@phosphor-icons/react v2.1.9
Build tools:
- typescript@^5.8.3
- vite@^6.3.5
⚠️ A require call resolved to an ESM JavaScript file, which is an error in Node and some bundlers. CommonJS consumers will need to use a dynamic import. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/CJSResolvesToESM.md
🚭 Syntax detected in the module is incompatible with the module kind according to the package.json or file extension. This is an error in Node and may cause problems in some bundlers. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/UnexpectedModuleSyntax.md
🥴 Import found in a type declaration file failed to resolve. Either this indicates that runtime resolution errors will occur, or (more likely) the types misrepresent the contents of the JavaScript files. Use -f json to see the imports that failed to resolve. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/InternalResolutionError.md
🐛 Import resolved to types through a conditional package.json export, but only after failing to resolve through an earlier condition. This behavior is a TypeScript bug (https://github.com/microsoft/TypeScript/issues/50762). It may misrepresent the runtime behavior of this import and should not be relied upon. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FallbackCondition.md
┌──────────────────────────────────────┬────────────┬──────────────────────────────┬──────────────────────────────┬────────────────────────────┐
│ │ node10 │ node16 (from CJS) │ node16 (from ESM) │ bundler │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react" │ 🟢 │ ⚠️ ESM (dynamic import only) │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ 🚭 Unexpected module syntax │ 🐛 Used fallback condition │ │
│ │ │ 🥴 Internal resolution error │ │ │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/icons/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/csr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/lib/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr" │ 🟢 │ 🚭 Unexpected module syntax │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ ⚠️ ESM (dynamic import only) │ 🐛 Used fallback condition │ │
│ │ │ 🥴 Internal resolution error │ │ │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/package.json" │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │
├──────────────────────────────────────┼────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
└──────────────────────────────────────┴────────────┴──────────────────────────────┴──────────────────────────────┴────────────────────────────┘
pnpm dlx @arethetypeswrong/cli --pack .
@phosphor-icons/react v2.1.10
Build tools:
- typescript@^5.8.3
- vite@^6.3.5
⚠️ A require call resolved to an ESM JavaScript file, which is an error in Node and some bundlers. CommonJS consumers will need to use a dynamic import. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/CJSResolvesToESM.md
🚭 Syntax detected in the module is incompatible with the module kind according to the package.json or file extension. This is an error in Node and may cause problems in some bundlers. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/UnexpectedModuleSyntax.md
🥴 Import found in a type declaration file failed to resolve. Either this indicates that runtime resolution errors will occur, or (more likely) the types misrepresent the contents of the JavaScript files. Use -f json to see the imports that failed to resolve. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/InternalResolutionError.md
🐛 Import resolved to types through a conditional package.json export, but only after failing to resolve through an earlier condition. This behavior is a TypeScript bug (https://github.com/microsoft/TypeScript/issues/50762). It may misrepresent the runtime behavior of this import and should not be relied upon. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FallbackCondition.md
💀 Import failed to resolve to type declarations or JavaScript files. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/NoResolution.md
┌──────────────────────────────────────┬──────────────────────┬──────────────────────────────┬──────────────────────────────┬────────────────────────────┐
│ │ node10 │ node16 (from CJS) │ node16 (from ESM) │ bundler │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react" │ 🟢 │ ⚠️ ESM (dynamic import only) │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ 🚭 Unexpected module syntax │ 🐛 Used fallback condition │ │
│ │ │ 🥴 Internal resolution error │ │ │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/icons/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/csr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/lib/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/lib" │ 💀 Resolution failed │ 🚭 Unexpected module syntax │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ ⚠️ ESM (dynamic import only) │ 🐛 Used fallback condition │ │
│ │ │ 🥴 Internal resolution error │ │ │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr" │ 🟢 │ 🚭 Unexpected module syntax │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ ⚠️ ESM (dynamic import only) │ 🐛 Used fallback condition │ │
│ │ │ 🥴 Internal resolution error │ │ │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/ssr" │ 💀 Resolution failed │ 🚭 Unexpected module syntax │ 🥴 Internal resolution error │ 🐛 Used fallback condition │
│ │ │ 🥴 Internal resolution error │ 🐛 Used fallback condition │ │
│ │ │ ⚠️ ESM (dynamic import only) │ │ │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/dist/ssr/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/package.json" │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │ 🟢 (JSON) │
├──────────────────────────────────────┼──────────────────────┼──────────────────────────────┼──────────────────────────────┼────────────────────────────┤
│ "@phosphor-icons/react/*" │ (wildcard) │ (wildcard) │ (wildcard) │ (wildcard) │
└──────────────────────────────────────┴──────────────────────┴──────────────────────────────┴──────────────────────────────┴────────────────────────────┘
Context (please complete the following information):
System:
OS: macOS 15.5
CPU: (10) arm64 Apple M2 Pro
Memory: 456.81 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.19.2 - ~/Library/pnpm/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.8.2 - ~/Library/pnpm/npm
pnpm: 10.6.3 - ~/Library/pnpm/pnpm
bun: 1.2.16 - ~/.bun/bin/bun
Watchman: 2025.05.26.00 - /opt/homebrew/bin/watchman
Additional notes
Might be related to: #133 , #96
I've encountered the same issue but when using Playwright resulting in a need to downgrade, definitely seems to be a regression here somewhere
Had the same issue, I was finally able to upgrade to 2.1.8 to make it work with my turborepo setup, but when I try to upgrade to latest it's broken again. I think it was this commit
The issue appears to be that when switching to type: module, the bundler assumes that every .js file is an ESM file. However, the CJS version of the code is located in ./dist/index.cjs.js.
If we modify the Vite configuration (https://github.com/phosphor-icons/react/blob/master/vite.config.ts#L14) to output the CJS version in ./dist/index.cjs, the problem may be resolved.
Where are we on a fix for this? Just ran into this issue with Sanity CMS and using this icons in their studio.
