[Bug?]: Loading a lot of chunks when adding @tabler/icons to the project

[j-tag]

What's not working?

After upgrading to redwood 8, having tabler icons in any pages will cause redwood to load a lot of chunks which will slows down (and sometimes crashes) the browser.

Here you can see a lot of chunks are loaded for just one tabler icon:

This behavior wasn't present on redwood 7, that's why I opened this bug report here for redwood instead of tabler icons.

How do we reproduce the bug?

to reproduce the bug you can do the following:

yarn create redwood-app my-redwood-project --typescript
cd ./my-redwood-project/
yarn workspace web add @tabler/icons-react
rw g page HomePage

then you should open up web/src/pages/HomePage/HomePage.tsx and import any icon from tabler icons:

import { IconHome } from '@tabler/icons-react'

then you can use this icon inside page content:

//...
<h1>HomePage</h1>

<span><IconHome style={{ width: 13, height: 13 }} /></span>

<p>
        Find me in <code>./web/src/pages/HomePage/HomePage.tsx</code>
</p>
//...

now if you run dev server and open up home page, you can see in your dev console that a lot of chunks are being loaded.

rw dev

What's your environment? (If it applies)

❯ rw info

  System:
    OS: Linux 6.11 Arch Linux
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 20.18.0 - /tmp/xfs-de75df9f/node
    Yarn: 4.4.0 - /tmp/xfs-de75df9f/yarn
  Databases:
    SQLite: 3.46.1 - /usr/bin/sqlite3
  npmPackages:
    @redwoodjs/core: 8.4.0 => 8.4.0 
    @redwoodjs/project-config: 8.4.0 => 8.4.0 
  redwood.toml:
    [web]
      title = "Redwood App"
      port = 8910
      apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
      includeEnvironmentVariables = [
        # Add any ENV vars that should be available to the web side to this array
        # See https://redwoodjs.com/docs/environment-variables#web
      ]
    [api]
      port = 8911
    [browser]
      open = true
    [notifications]
      versionUpdates = ["latest"]

Are you interested in working on this?

• I'm interested in working on this

[ArseniiLyzenko]

1. fix via vite alias - Vite dev mode loads all icon chunks with 3.19.0 (React) tabler/tabler-icons#1233 (comment)

2. fix via tabler downgrade - Vite dev mode loads all icon chunks with 3.19.0 (React) tabler/tabler-icons#1233 (comment)

[j-tag]

Thanks @ArseniiLyzenko for the workaround. Saved me a lot of headaches. So it seems the problem comes from Vite and Tabler icons and is not related to Redwoodjs. So I'm closing this issue.