Incorrect exports specified in `package.json`

[rektdeckard]

Discussed in #95

^{Originally posted by diegolauar April 23, 2024}
If you get this error: Failed to resolve entry for package "@phosphor-icons/react". The package may have incorrect main/module/exports specified in its package.json.

Try install: npm install phosphor-react

Use: import { . . . } from "phosphor-react"

[rektdeckard]

@diegolauar can you provide some details:

• @phosphor-icons/react version
• Project type (pure React, Next, Astro, etc.) and version
• Build tooling (vite, turbo, etc.) and version
• Node version
• Any supporting context that can help reproduce and diagnose the error

[noseworthy]

I'm having a similar issue. I'm using the vite esm and typescript template to build a pure react app. Here's my environment:

@phosphor-icons/react: 2.1.7
react: 18.3.3
vite: 5.3.5
typescript: 5.5.4
node.js: 18.20.4

TypeScript complains if moduleResolution is set to "bundle" as the default vite template does, so I've changed it to NodeNext. This allows the app to build properly and vite can run it. Unfortunately when I add @phosphor-icons/react to the project, I'm unable to import any components from @phosphor-icons/react directly:

import { FolderOpen, PlusSquare } from '@phosphor-icons/react';

This results in the following typescript error:

❯ yarn build
src/App.tsx:1:10 - error TS2305: Module '"@phosphor-icons/react"' has no exported member 'FolderOpen'.

1 import { FolderOpen, PlusSquare } from '@phosphor-icons/react';

However, if I use the fully qualified exports, everything works fine:

// This works fine
import { FolderOpen } from '@phosphor-icons/react/FolderOpen';
import { PlusSquare } from '@phosphor-icons/react/PlusSquare';

Any thoughts?

[Gerrist]

Weirdly enough I'm encountering the same issue, though using the fully qualified exports generates a deprecation error: The tag is marked as deprecated .

When using import { FolderOpenIcon } from "@phosphor-icons/react/FolderOpen"; it works perfectly fine. There seems to be a conflict somewhere, since the syntax without *Import appending the icon component is the syntax as documented on https://phosphoricons.com.