Incorrect exports specified in `package.json`

[rektdeckard]

Discussed in https://github.com/phosphor-icons/react/discussions/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?