The Tabler 3.31.0 is breaking the project with vite

[ericssendelima]

I found a problem using the Tabler lib; The site just didn't open.

I found the same problem and a partial solution in this other issue:

tabler/tabler-icons#1233 (comment).

The solution that worked for me was:

tabler/tabler-icons#1233 (comment).

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',
    },
  },
})

Wouldn't it be better to change the icon library for this project? Maybe to react-icons or heroicons? Or add some other configuration and inform it in the documentation?

[doelgonzo]

Just experienced the same. The above workaround made the experience much better, but it does kind of imply we'll be bundling every icon regardless of use (at least in dev mode), correct?

I made this my change:

export default defineConfig(({ mode }) => ({
  // ... other props
  resolve: {
    alias: {
      ...(mode === 'development' && {
        // See https://github.com/mantinedev/ui.mantine.dev/issues/113
        '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs'
      })
    }
  },
  // ... other props
}))

But not sure if some magic makes me not have to check for the dev mode

[ericssendelima]

It wasn't necessary for me. Only used this config. But actually, i changed the component library of my project.
I love Mantine, but at this moment, it brought some problems to my project.

[signal-intrusion]

If you map to '@tabler/icons-react/dist/esm/icons/index.mjs' you get all 4.6MB of icons in a single file. This simply changes a bunch of parallel downloads to a single massive download.

The right solution needs to tree-shake icons to just the icons you import.

[doelgonzo]

@signal-intrusion I agree, but this was a dev-only issue, and the above config worked for dev mode