styled-jsx is always included in client bundle (even when unused)

[GrantASL19]

What version of Next.js are you using?

12.0.0

What version of Node.js are you using?

16.6.2

What browser are you using?

N/A

What operating system are you using?

macOS

How are you deploying your application?

N/A

Describe the Bug

Starting with nextjs 12.0.0 styled-jsx is included in the client bundle even when it’s not used anywhere in the project. e.g. in a fresh create-next-app:

This wasn’t the case with Next.js 11.

Expected Behavior

styled-jsx should only be included in the bundle if it’s used in the project.

To Reproduce

Here’s a reproduction based on the latest create-next-app (with the typescript preset):

https://github.com/GrantASL19/nextjs-12-unusued-styled-jsx-in-bundle

It’s stock code with WebpackBundleAnalyzer set to run in the next.config.js webpack config.

[huozhi]

@GrantASL19 that's expected. We change the whole architecture to make it support react concurrent mode better. Part of styled-jsx registry and context are inside next.js. The normal part of your actual styles are still in other chunks.

You can checkout the readme for the new API changes.

[GrantASL19]

Okay that makes more sense, thanks for the quick reply!

Just to be clear, it’s expected that this code will be bundled with a Next.js 12 site even if the site e.g. uses only Emotion for styling? I found this change because I noticed that each page was ~3kb larger after I upgraded to 12.

[huozhi]

It will be bundled into next.js but only a small part of styled-jsx. For the 3kb increasing do you mean on the chunk files?

[GrantASL19]

It will be bundled into next.js but only a small part of styled-jsx. For the 3kb increasing do you mean on the chunk files?

I mean the styled-jsx files (mostly stylesheet.js and stylesheet-registry.js) in the main chunk pictured above.

Because my previous understanding was that styled-jsx was entirely opt-in I figured this was a bug. If this is expected behaviour even if no stylesheets are loaded I understand, thanks for explaining!

[timneutkens]

Going to re-open this to investigate if it might be optimized 👍 Thanks for bringing this to our attention @GrantASL19 👍

[felixjung]

Hey, I also noticed this today when looking at our client bundle. styled-jsx is included despite us relying entirely on Emotion. Like @GrantASL19 says, it makes up 3kB, gzipped. Seems rather large for something that isn't being used.

[huozhi]

Could you please try next@12.0.8-canary.13 to see if it resolves your issue? Thanks 🙏

[GrantASL19]

Could you please try next@12.0.8-canary.13 to see if it resolves your issue? Thanks 🙏

next@12.0.8-canary.13 resolves the issue, thanks! 🙏

I’m still seeing a ~4kb bundle size increase vs. 11.1.2, but that’s described by #32417. I’ll try to make a reproduction for it in January.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.