optimizePackageImports is not working with react-icons in dev mode

[FilipiBrabo]

Link to the code that reproduces this issue

https://github.com/FilipiBrabo/nextjs-react-icons

To Reproduce

1. Start the application with analyze-bundle enabled ANALYZE=true npm run dev
2. Go to localhost:3000 the bundle files should open in your browser

Current vs. Expected behavior

The current behavior is that all icons from a react-icon pack are being included in the final bundle in dev mode.

From the optimizePackageImports docs I expected that react-icons/* would be tree shaken both in dev and in prod build.

I've also included a lucide icon to see the difference, and noticed that optimizePackageImports is working as expected.

These are the bundles generated in dev mode of the application provided. You can see that all fa, bs and ai icons are being included in the final dev bundle.

Client bundle:

Node.js bundle:

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #123-Ubuntu SMP Mon Jun 10 08:16:17 UTC 2024
  Available memory (MB): 32012
  Available CPU cores: 16
Binaries:
  Node: 18.20.4
  npm: 10.7.0
  Yarn: N/A
  pnpm: 8.15.8
Relevant Packages:
  next: 15.0.0-canary.174 // Latest available version is detected (15.0.0-canary.174).
  eslint-config-next: N/A
  react: 19.0.0-rc-2d16326d-20240930
  react-dom: 19.0.0-rc-2d16326d-20240930
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Performance

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I didn't dig too much deep into this, but these were the things that I've tried:

1. Use modularizeImports to replace react-icons with @react-icons/all-files. You can check it out in the next.config.js file.

{
  reactStrictMode: true,
  modularizeImports: {
    "react-icons/fa": {
      transform: "@react-icons/all-files/fa/{{ member }}",
    },
    "react-icons/bs": {
      transform: "@react-icons/all-files/bs/{{ member }}",
    },
    "react-icons/ai": {
      transform: "@react-icons/all-files/ai/{{ member }}",
    },
  },
}

2. Specify react-icons lib in optimizePackageImports config

{
  reactStrictMode: true,
  experimental: {
    optimizePackageImports: [
      "react-icons/fa",
      "react-icons/bs",
      "react-icons/ai",
    ],
    // or
    optimizePackageImports: ["react-icons"],
  },
}

This really affects DX if you have too many icons from different packs being imported.
I'm happy to help in any way to fix this issue, just need a little guidance 😅

[samcx]

@FilipiBrabo Thank you for submitting an issue!

We are taking a look at this—

[FilipiBrabo]

@FilipiBrabo Thank you for submitting an issue!

We are taking a look at this—

Thanks, @samcx! Feel free to reach out if you need any help. I’m happy to assist however I can, and I’m curious to learn more about the bundling/optimizing process 😃

[stychu]

NextJs v14.2.23

Doesn't seem the issue is resolved.
Our Compile times avg around 40 SEC which is insanity for development..... after I remove all imports to react-icons it goes down 3-5 sec which is more acceptable but still significant.