./node_modules/@phosphor-icons/react/dist/lib/context.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

[shreyasmulay2305]

Describe the bug

Unable to build the project after doing npm install with latest build v2.1.4

Steps to Reproduce

Install v2.1.4 and try to run react project you will find the issue in console

./node_modules/@phosphor-icons/react/dist/lib/context.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

Expected behavior

No error should be reported in console or in browser. It should work as normal.

Screenshots

Context (please complete the following information):

• OS: Windows 11 Home
• Browser: Chrome
• Library: @phosphor-icons/react
• Version: v2.1.4

[shreyasmulay2305]

Failed at Vercel as well

[shreyasmulay2305]

@rektdeckard Sorry to bother, but do you have any update on this bug ?

[anu2308]

Any update on this bug? Any solution? facing the same problem with exact same error message and configuration.

[rektdeckard]

@shreyas-aw I assume this is a Nextjs app, because Vercel and thats the only kind of bug reports we get here anymore. Can you share your Next version and example of usage? Are you using the ssr version of the icons, and how are you importing them? If not, are the csr icons being used in client components?

[rektdeckard]

A minimal reproduction would be appreciated.

[anu2308]

@rektdeckard Am using "@phosphor-icons/react": "^2.0.5" csr and using react for frontend...

[anu2308]

@rektdeckard Am using "@phosphor-icons/react": "^2.0.5" csr and using react for frontend...

I solved the issue, the problem was with my package.json using react script version 3.4+, I updated it to version 5.+ and it worked

[shreyasmulay2305]

@anu2308, I am already pointing to "react-scripts": "^5.0.1" but still received error, if possible can you please paste your package.json file here.

[shreyasmulay2305]

@shreyas-aw I assume this is a Nextjs app, because Vercel and thats the only kind of bug reports we get here anymore. Can you share your Next version and example of usage? Are you using the ssr version of the icons, and how are you importing them? If not, are the csr icons being used in client components?

Sorry @rektdeckard, it is a react app.

[danihml-triibo]

anyone has solved this problem? I'm facing the same issue here.

React App v17, Node v16. Only the legacy version (phosphor-react import) is working.

[shreyasmulay2305]

HI @rektdeckard, any luck ? I am still unable to proceed coz of the same error. Even I upgraded to latest version.

[FreiBj]

I fixed it by using the SSR import instead of the normal one proposed by autocomplete. @shreyas-aw @danihml-triibo @anu2308

// import { ArrowDown } from '@phosphor-icons/react'
import { ArrowDown } from "@phosphor-icons/react/dist/ssr";

const MyServerComponent = () => {
  return <ArrowDown size={20} />;
};

[shreyasmulay2305]

Actually there was an issue with my custom webpack configuration. When I created the react app using CRA, it worked from start itself.

Though thanks for responding :)

cc @FreiBj @danihml-triibo @rektdeckard