Vite dev mode loads all icon chunks with 3.19.0 (React)

[dcentrih]

Description

Using the new 3.19.0 version of the react package breaks dev mode.
After importing any one icon into a component, vite will start loading all the icon chunks (takes about 10 seconds on my machine).
Building the app does not have this issue (preview mode).

Package

• @tabler/icons
• @tabler/icons-eps
• @tabler/icons-pdf
• @tabler/icons-png
• @tabler/icons-webfont
• @tabler/icons-sprite
• @tabler/icons-preact
• @tabler/icons-react
• @tabler/icons-react-native
• @tabler/icons-solid
• @tabler/icons-svelte
• @tabler/icons-vue
• Figma plugin
• source/main
• other/not relevant

Version

3.19.0

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Steps to reproduce

1. Import any icon
   import { IconComponents, IconTag } from "@tabler/icons-react";
2. Run vite in dev mode

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[fnoopv]

+1

[adnanfajlur]

+1

[AhmedHHamdy]

+1

[ciro-maciel]

+1

[Kevin-Saukel-Git]

+1

[amankrokx]

+1

[noah-franklin]

was losing my mind over why vite was taking 5 years to load initially, I guess something broke tree shaking in 3.19

[Reynard-G]

+1

[dougfrei]

It seems like something with [email protected] is causing this problem. I checked down to @tabler/[email protected] and still had issues with all the icon chunks loading in dev mode. After downgrading to [email protected] the excess chunk loading was gone, even when using @tabler/[email protected].

[Cararr]

It almost blew my pc.

[pavel-pargachev]

It has something to do with the new "Dynamic Icons Import" feature released with 3.19.0 (#1081).

When I commented out 2 lines related to this feature from tabler-icons-react.mjs file - the loading of chunks by vite dev went to normal again:

[enyelsequeira]

anyone found a solution yet? downgrading perhaps? or is there a better one?

[ciro-maciel]

for now, I forced the installation to:

"@tabler/icons-react": "3.17.0",
"vite": "5.4.8",

I cleaned the environment,

rm -rf node_modules bun.lockb package-lock.json dist

I installed everything again and it worked fine here

[amankrokx]

for now, I forced the installation to:

"@tabler/icons-react": "3.17.0",
"vite": "5.4.8",

@ciro-maciel any specific reason for not using 3.18.0 ? I'm using that.

[enyelsequeira]

for now, I forced the installation to:

"@tabler/icons-react": "3.17.0",
"vite": "5.4.8",

I cleaned the environment,

rm -rf node_modules bun.lockb package-lock.json dist

I installed everything again and it worked fine here

Same here ended up locking the correct one, I’m using it with mantine so I’m using that version

[ciro-maciel]

for now, I forced the installation to:

"@tabler/icons-react": "3.17.0",
"vite": "5.4.8",

@ciro-maciel any specific reason for not using 3.18.0 ? I'm using that.

I tested with 3.18.0 and got the error... so I used 3.17.0 and I'm not getting the error

[lukasbash]

This not only affects the DEV mode. It also affects the production bundle. Even more critical because it's a silent failure.

[astalarico]

+1

[mathiaswillburger]

same issue, forcing the package to "@tabler/icons-react": "3.17.0" solved the problem for now and speeds up the vite dev application load tremendously again

[KevinVandy]

@codecalm @timheerwagen Any chance this gets fixed? Kind of afraid that in order to fix this for mantine-react-table, I'll have to just embed the svgs in the codebase instead of using tabler as a peer dep. KevinVandy/mantine-react-table#418

[KevinVandy]

This not only affects the DEV mode. It also affects the production bundle. Even more critical because it's a silent failure.

@lukasbash

All other reports are that in only affects DEV mode and not production bundles. Could you share what kind of build config that application has? Older webpack?

If true, this is way more serious than I initially thought, as it would be potentially quadrupling the bundle size of some apps for unused icons.

[lukasbash]

This not only affects the DEV mode. It also affects the production bundle. Even more critical because it's a silent failure.

@lukasbash

All other reports are that in only affects DEV mode and not production bundles. Could you share what kind of build config that application has? Older webpack?

If true, this is way more serious than I initially thought, as it would be potentially quadrupling the bundle size of some apps for unused icons.

Might be I got this wrong but I am simply performing a bundle analyzer call on the latest vite version.

In my case I am using bun:
bunx vite-bundle-visualizer

[AstroCaleb]

Glad I found this thread! I updated deps last night before launching a new project and noticed dev mode started taking the same ~10 seconds others have described. Forcing "@tabler/icons-react": "3.17.0" also worked for me, running with latest vite (5.4.9) and everything. I even tested with [email protected] and [email protected], based on a comment above, and still noticed the chunks issue. It seems, at least for me, [email protected] is the only change I needed to change.

[baberMatt]

+1 same issue as described by many in my Remix(vite) vercel app. Will try versioning down