Tree-shaking/Code splitting doesn't work properly?

[IonelLupu]

Summary

We started to use react-aria-components in our NextJS project and we encountered something strange: when using just a simple <Button> from react-aria-components, the entire 140kb+ react-aria-components package is imported in the app as seen in the next-bundle-analyzer report below:

At first, I thought this is a problem with how the files are exported from react-aria-components.

I don't think this is the case, because a Vite React project shows it only imports under 40kb of react-aria-components packages as seen in the vite-bundle-visualizer report below:

Is next-bundle-analyzer outputting wrong data or is there a problem with the NextJS builder?

Following this issue, I came across other two opened issues:

• Tree shaking doesn't work with Typescript barrel files #12557
• which points to 'use client' directive required for unused transpiled components. #44039

Reading these I noticed that using 'use client' in every page does bring the react-aria-components package size down to ~40kb:

You might thing the issue is solved, but nooo.

As you will notice in the NextJS repos I created to replicate the issue and I listed below, the "/" page is using a simple <Button> and the "/other-page" is using a more complex <Select> component. Still, the "/" page that is using only a <Button> contains all of the modules for the <Select> component EVEN IF the "/" page is not using the <Select> component at all. 🤯

Here is another example where I have a page with a <Table> from react-aria-components (I didn't add this page in the repo, but you get the idea). The bundle size goes crazy to around ~140kb:

In order to see this yourself, clone the NextJS repo linked below. From there, check these scenarios:

Scenario 1: run npm run build. In the "client" bundle analyzer browser tab, after you select the "app/page" file, you will see the bundle have around 36kb. This contains both the Button and Select modules:

Scenario 2: delete the entire "other-page" folder and run npm run build again. In the "client" bundle analyzer opened tab, after you select the "app/page" file. Notice the bundle size for react-aria going down to around ~15kb. It contains only the modules for . Below are some screenshots for both the "app/page" page and "app/other-page/page" page:

Scenario 3: remove the 'use client' from the "app/page.tsx" file and run npm run build again. In the "client" bundle analyzer opened tab, after you select the "app/page" file. Notice the bundle size going up to ~140kb for react-aria. It contains the ENTIRE "react-aria-components" library

Using modularizeImports doesn't work for react-aria-components, but I think this is a react-aria-components issue:

Also, using "sideEffect": false doesn't do anything either.

---

I don't know what happens, but it seems NextJS is summing up all the used imports and uses that FOR EVERY SINGLE PAGE that uses react-aria-components.

It should split the react-aria-component library based on every component used for that particular page.

Here are the repos you can use to see the difference:

• NextJS repo: https://github.com/IonelLupu/react-aria-button-bundle-size-nextjs
• Vite repo: https://github.com/IonelLupu/react-aria-button-bundle-size-vite

Additional information

$ next info  

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Fri Dec  1 03:17:00 PST 2023; root:xnu-10002.80.11~58/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.37
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Example

https://github.com/IonelLupu/react-aria-button-bundle-size-nextjs

[sibelius]

did you figure it out ?

[igshehata]

it's such a shame that there are a ton of github issues just like this one, very well explained but no answer.