[Next 13] - Multiple versions of React is shipped. One page has 2x the bundle size without any libraries.

[sannajammeh]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:05:47 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T8101
Binaries:
  Node: 18.10.0
  npm: 8.19.2
  Yarn: 1.22.17
  pnpm: 7.5.0
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 106.0.5249.119

How are you deploying your application? (if relevant)

next start

Describe the Bug

When building my app this is the result:

Route (app)                                Size     First Load JS
┌ ○ /                                      0 B                0 B
├ ○ /dashboard                             105 B          66.6 kB
├ ○ /dashboard/users                       186 B           141 kB // What is going on here?
└ λ /dashboard/users/[id]                  4.59 kB        75.7 kB
+ First Load JS shared by all              66.5 kB
  ├ chunks/main-app-fd902262245ffaed.js    64.5 kB
  └ chunks/webpack-8876bb8973ebf277.js     2.07 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   179 B          79.8 kB
+ First Load JS shared by all              79.6 kB
  ├ chunks/main-d4cdf33ec41ad030.js        77.3 kB
  ├ chunks/pages/_app-4e5b418629f6f9e0.js  193 B
  └ chunks/webpack-8876bb8973ebf277.js     2.07 kB

It appears that Next is bundling 2 instances of React for the endpoint /dashboard/users. This has resulted in a 2x bundle increase on this particular page, and I cannot seem to figure out why.

I've fired up the bundle analyzer and see that a specific chunk includes both next.js and react + react-dom, and its not the main bundle.

I have attempted running with swcMinify & without. Same result.

Expected Behavior

Dual versions of React should not be shipped randomly on a page.

Link to reproduction

https://github.com/sannajammeh/next-13-dual-react

To Reproduce

1. Git clone
2. pnpm install
3. next build
4. Observe /dashboard/users has double the size despite not needing it.
5. Run ANALYZE=true next build and observe the chunk shipped with code identical to main-... with some exceptions in the Next runtime.

[jescalan]

Thank you for reporting and catching this - the team is working on a fix now!

[alexparish]

Just for completeness, it seems that react-server-dom-webpack/client.js and the contents of client/components are also being bundled multiple times.

These are the JS chunks delivered to the browser from a Next.js 13.0.0 app created using create-next-app@latest:

[alexparish]

I upgraded to v13.0.1-canary.1 since it was just published and, although I am now only seeing react-dom once, I am still seeing multiple versions of react being bundled when using the app directory and running npm run build

Happy to create a new issue for this, if required.

Total JS transferred

v13.0.0: 90kB gzipped / 272kB minified

v13.0.1-canary.1: 78kB gzipped / 234kB minified

[timneutkens]

@alexparish React duplication is fixed in #42252 out on 13.0.1!

[alexparish]

@timneutkens Nice!

v13.0.1: 70.9kB gzipped / 215kB minified

[alexparish]

@timneutkens Something that might cause confusion is that a chunk is built that is not served in the hello world example. You might find people re-open this issue if they spot it. I've highlighted it with a red box in my screenshot below.

Do you know what it's used for?

[timneutkens]

That's the main bundle for pages, it's still built currently because the default 404 page doesn't use the component defined in app yet (it's on the list of things to implement).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.