tabler
Issue: Vike + @tabler/icons-react Breaks Dev Mode REACT
Icon name
all
Use cases
all
Design ideas
Issue: Vike + @tabler/icons-react Breaks Dev Mode
Description
When using Vike with React (vike-react) and the @tabler/icons-react package (^3.31.0), the development mode breaks after importing any icon into a component. Vite starts loading all the icon chunks, which causes a significant delay (about 10 seconds on my machine). The issue does not occur during the build process or when running the app in preview mode.
Reproduction
- Install the following packages:
-
"vike": "^0.4.225" -
"vike-cloudflare": "^0.1.7" -
"vike-react": "^0.6.1" -
"vite": "^6.2.2" -
"@tabler/icons-react": "^3.31.0"
-
- Import any icon from
@tabler/icons-reactin a component, e.g.:import { Home } from '@tabler/icons-react';
Temporary Workaround
As a temporary solution, adding the following configuration to vite.config.ts resolves the issue:
`import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react';
export default defineConfig({ plugins: [react()], resolve: { alias: { // Add this alias to solve the issue temporarily '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs', }, }, }); `
Checklist
- [x] 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.)
- [x] I have searched existing icons to make sure it does not already exist and I didn't find any.
- [x] I am not requesting a brand logo and the art is not protected by copyright.
- [x] I have provided appropriate use cases for the icon(s) requested.
I believe this is a duplicate of #1233. Some other workarounds include importing the icons directly (see here) or pinning the package version to 3.17.0 or earlier (if you don't need any of the more recent icons).
