react: Error caused by `exports` field in `package.json`

Describe the bug Using the latest version of the package (v2.0.4) along with esbuild and Next.js v13 this error pops up in the console when trying to import any icon from the library.

Package path . is not exported from package /my_pc_project_path/node_modules/@phosphor-icons/react (see exports field in /my_pc_project_path/node_modules/@phosphor-icons/react/package.json)

Looking up the path reported I can see this entry

// other stuff...
"exports": {
  ".": {
    "import": "./dist/index.es.js"
  }
},
// more stuff...

To Reproduce It is quite the hassle, it invlolves setting up a monorepo with Turborepo and creating different apps and packages. If necessary I can provide a link to my repository.

Expected behavior I expect the app to work without throwing any errors both in developement and production.

Desktop:

OS: Fedora Linux 36 (Workstation Edition)
Browser: Brave
Version: Version 1.48.164 Chromium: 110.0.5481.100 (Official Build) (64-bit)

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 23 (8 by maintainers)

Most upvoted comments

I’ve just published v2.0.8, which includes a UMD export (compatible with CJS build tooling), and does not specify "type": "module" in package.json. This should alleviate all of the build issues mentioned here. As a side-effect of the build, we won’t support any qualified imports in that environment:

import AddressBook from "@phosphor-icons/react/AddressBook"; // CAN'T DO THIS IN CJS ENVIRONMENT
import { AddressBook } from "@phosphor-icons/react"; // CAN DO THIS IN EITHER ENVIRONMENT

rektdeckard on Apr 2, 2023

@rektdeckard I just tested the latest update of @phosphor-icons/react with Sanity (latest version 3.8.2) and its working great! No issues are logged when deploying graphql or with importing icons into react templates!

rylanharper on Apr 3, 2023

Everything is all good for me. Seems like the original issue is resolved as well @milovangudelj?

rylanharper on Apr 4, 2023

Yeah definitely. I appreciate the help!

I’ll update in this thread if a receive an answer tomorrow from the Sanity team.

rylanharper on Mar 28, 2023

As I mentioned above that only works if you have set your package type to "module" instead of "commonjs" in your package.json file.

But this isn’t possible for every type of application/package. Sanity requires you to use common js and switching is quite the hassle. I’ve tried doing that in the past with various degrees of success and you have to make compromises whichever way you chose to go.

milovangudelj on Mar 27, 2023

Ok, thank you. I will check again tomorrow to see if there’s something I can change in the esbuild configuration and/or in my Turborepo setup and I’ll let you know.

I’ll link you my repo when I commit the changes since right now I have them locally on my machine.

milovangudelj on Mar 8, 2023