Compatibility with Astro framework

[pReya]

I'm trying to use Phosphor icons in an Astro project. Astro is a meta-framework similar to Next.js, which allows you to decide whether a React component is generated on the server (SSG), rendered on the server for every request (SSR) or shipped to the client like adefault React SPA.

By default, a React component in Astro will be generated on the server and then shipped to the client as static HTML.

However, this does currently not work with Phosphor Icons. There is an error in the build process:

I've prepared a minimal example: https://stackblitz.com/edit/github-rbetns?file=src%2Fcomponents%2FIconContainer.tsx

 error   Cannot use import statement outside a module
/home/projects/github-rbetns/node_modules/@phosphor-icons/react/dist/index.es.js:1
import { IconContext as o } from "./lib/context.es.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module

This seems to be related to the IconContext – even though I haven't added any. Is there a way to disable/not use the Context at all and still import the React components for the icons?

[adamtaylor13]

@pReya I'm running into this as well. I took a look at your example, and it only actually seems to show the error once I added Smiley to the IconContainer—simply importing it did not seem to reproduce. I'm very curious what changed as well, because the legacy phosphor-react library worked fine with Astro.

Things I've tried

• Switching all imported instances of my react components to "client:only" directives so they aren't server-side rendered.
• Adding "use client" to my icon imports.
• Changing my package.json to "type": "module", to no avail.
• Adding "module": "nodenext", to my tsconfig.json
• All the above in various orders / combinations.

All to no avail unfortunately. I'm going to just have to downgrade to using phosphor-react for right now.

[pReya]

A workaround for me is currently to use the raw svg files and import them with https://github.com/pd4d10/vite-plugin-svgr as React components.

This problem might be fixed just by adding type: "module" to the package.json of the @phosphor-icons/react package.

[adamtaylor13]

This problem might be fixed just by adding type: "module" to the package.json of the @phosphor-icons/react package

@pReya Wow, no kidding, this fixed it!

[adamtaylor13]

Just in case my PR doesn't go through, I wrote a small blog post about how I'm implementing this for now without needing to use the vite plugin: https://adamtaylor.me/posts/fixing-a-minor-inconvenience-with-phosphor-icons/

[rektdeckard]

Thanks @pReya for flagging, and @adamtaylor13 for the fix and for the lovely writeup! v2.0.10 had been published with the type field added.