Build fails when using a React component with react-icons within an astro file

[kimwoodfield]

What version of astro are you using?

2.8.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows, Mac

What browser are you using?

Chrome

Describe the Bug

When using react-icons (4.10.1) within a React component that is referenced in an Astro file and the build script is run via npm run build the build fails with the following error:

generating static routes 
 error   Named export 'BsGithub' not found. The requested module 'react-icons/bs/index.esm.js' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:

  import pkg from 'react-icons/bs/index.esm.js';
  const { BsGithub, BsLinkedin } = pkg;

Running the project using npm run dev works fine and the icons render as expected.

What's the expected result?

The app and all corresponding assets are built successfully as expected.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-z3zm9g?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

The react-icons incorrectly export their packages: https://publint.dev/react-icons@4.10.1

I'm not sure this is an Astro issue; the problem is clearly the package. @bluwy do you know if there's a way, via Astro config, to bypass the issue?

[natemoo-re]

Closing this issue since it's upstream. Unfortunately, we can't make every outdated package work with Astro out of the box.

• Here's the upstream react-icons issue.
• This vite issue might also be helpful context with some possible solutions. Astro is able to update vite configuration directly by modifying the vite object in your astro.config.mjs file. See this recipe for more context.

[bluwy]

I'm not sure this is an Astro issue; the problem is clearly the package. @bluwy do you know if there's a way, via Astro config, to bypass the issue?

Sorry forgot to reply to this. A way would be to follow the syntax as suggested by the error message. Or another way is to configure ssr.noExternal: ['react-icons'] to bundle it to hide from being loaded by Node.js

[buckldav]

I'm not sure this is an Astro issue; the problem is clearly the package. @bluwy do you know if there's a way, via Astro config, to bypass the issue?

Sorry forgot to reply to this. A way would be to follow the syntax as suggested by the error message. Or another way is to configure ssr.noExternal: ['react-icons'] to bundle it to hide from being loaded by Node.js

Worked for me! The astro.config.mjs file ends up looking like this:

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  ...,
  vite: {
    ssr: {
      noExternal: ["react-icons"],
    },
  },
});

[yanniro2]

its working. thank you 🤩