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]

+1 – 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

[ssdwho]

I wonder if the update that caused this problem could not be determined? Version 3.17.0 is working fine. What happened next?

[sethen]

3.x.x is unusable for me and crashes my app

[sionguo]

+1 v3.21.0

[arthurrocha-dev]

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

![CleanShot 2024-10-02 at 15 23 22](https://private-user-images.githubusercontent.com/349602/372986486-e861fdc9-06ad-4b1c-b2d2-918924778fc1.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzEwMDUwMDMsIm5iZiI6MTczMTAwNDcwMywicGF0aCI6Ii8zNDk2MDIvMzcyOTg2NDg2LWU4NjFmZGM5LTA2YWQtNGIxYy1iMmQyLTkxODkyNDc3OGZjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTEwN1QxODM4MjNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZWMxYTViNzJkMTdkNTkxODY4ZWExMzJlMmMxOWYzMmJhOGM2ODI3N2E3MjQ4MmVhNTI5ZTJmNTQ3YjMyYWViJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.3LPyKdTSdSEluGR5Ngt_gqUJ1eFD-

I downgraded the libraries to these versions, and it worked without any issues.

@tabler/icons": "3.17.0",
"@tabler/icons-react": "2.47.0",
"vite": "^5.4.1"

[ssdwho]

3.21.0 added the new icons I needed, but I'm stuck with 3.17.0. ☹️

[mrclrchtr]

3.21.0 added the new icons I needed, but I'm stuck with 3.17.0. ☹️

There is a workaround #1233 (comment)
Why don't you use it?

[ImanEmadi]

I was about to open a similar issue until i saw this.
how this problem is not yet addressed is beyond me.

[ssdwho]

3.21.0 added the new icons I needed, but I'm stuck with 3.17.0. ☹️

There is a workaround #1233 (comment) Why don't you use it?

Oh! My mistake, I missed it. Thanks, it's working.

[Icaruk]

Workaround from #1233 (comment) worked!

[Lamarcke]

I've just spent the whole noun debugging this. Thanks to #1233 (comment) for the workaround!

[truckcarr11]

Also experienced this, glad to see there is a work around. Any way we can get an update on having this fixed?

[alikazai]

Was going mad at why my app was slow, reading the comments tried this one and it worked Thanks to #1233 (comment) for the workaround!

however there should be a better more permanent solution for future users of this plugin.
not sure what the exact issue is but someone mentioned the dynamic imports was the problem. anyone tried running this without dynamic imports.

[EldinHb]

This is caused by exporting dynamic imports: https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/esm/dynamic-imports.mjs

Each dynamic import creates a separate chunk chunk-[hash].js, hence the 5k+ chunks built by Vite

For a temporary workaround, you could setup an alias such that vite resolves the import to only the static exports entrypoint

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // /esm/icons/index.mjs only exports the icons statically, so no separate chunks are created
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  },
})

Credit to hiogawa from the Vite team for the temporary solution

If I use this I get errors with some icons and not with others. For example IconBurger works fine. Icon24Hours provides an error. This is the error: The requested module '/node_modules/.vite/deps/@tabler_icons-react.js?v=d60d3af5' does not provide an export named 'Icon24Hours'. Icon24Hours is missing in the index.mjs. In fact, any icon that starts with a number after icon is missing from @tabler/icons-react/dist/esm/icons

Anyone else experiencing the same issue?

[kenzaflow]

This is caused by exporting dynamic imports: https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/esm/dynamic-imports.mjs
Each dynamic import creates a separate chunk chunk-[hash].js, hence the 5k+ chunks built by Vite
For a temporary workaround, you could setup an alias such that vite resolves the import to only the static exports entrypoint

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // /esm/icons/index.mjs only exports the icons statically, so no separate chunks are created
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  },
})

Credit to hiogawa from the Vite team for the temporary solution

If I use this I get errors with some icons and not with others. For example IconBurger works fine. Icon24Hours provides an error. This is the error: The requested module '/node_modules/.vite/deps/@tabler_icons-react.js?v=d60d3af5' does not provide an export named 'Icon24Hours'. Icon24Hours is missing in the index.mjs. In fact, any icon that starts with a number after icon is missing from @tabler/icons-react/dist/esm/icons

Anyone else experiencing the same issue?

yes

[ssdwho]

This is caused by exporting dynamic imports: https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/esm/dynamic-imports.mjs
Each dynamic import creates a separate chunk chunk-[hash].js, hence the 5k+ chunks built by Vite
For a temporary workaround, you could setup an alias such that vite resolves the import to only the static exports entrypoint

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // /esm/icons/index.mjs only exports the icons statically, so no separate chunks are created
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  },
})

Credit to hiogawa from the Vite team for the temporary solution

If I use this I get errors with some icons and not with others. For example IconBurger works fine. Icon24Hours provides an error. This is the error: The requested module '/node_modules/.vite/deps/@tabler_icons-react.js?v=d60d3af5' does not provide an export named 'Icon24Hours'. Icon24Hours is missing in the index.mjs. In fact, any icon that starts with a number after icon is missing from @tabler/icons-react/dist/esm/icons
Anyone else experiencing the same issue?

yes

The common point in both of your problems is that the icon names are defined as aliases.

tabler-icons/aliases.json

Lines 10 to 17 in 9f21e6f

	"box-seam": "package",
	"kering": "kerning",
	"2fa": "auth-2fa",
	"3d-cube-sphere": "cube-3d-sphere",
	"3d-cube-sphere-off": "cube-3d-sphere-off",
	"3d-rotate": "rotate-3d",
	"12-hours": "hours-12",
	"24-hours": "hours-24",

IconHours24
IconPackage

you can use it like this.