getInitialProps in _document does not produce server-side styled-components styles

[kachkaev]

Verify canary release

• I verified that the issue exists in Next.js canary release
  (12.1.3 is the latest release at the time of writing)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.14.0
  npm: 8.5.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.3
  react: 18.0.0
  react-dom: 18.0.0

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

Describe the Bug

This bug is very similar to what has already been described in #35711 and fixed in #35736. Upgrading Next from 12.1.1 to 12.1.3 breaks SSR in styled-components when using React 18. Initial styles are missing in page source, as if getInitialProps in _document have not been called.

...<style data-styled="" data-styled-version="5.3.5">body{margin:0;padding:0;box-sizing:border-box;}/*!sc*/
data-styled.g1[id="sc-global-fvFGgF1"]{content:"sc-global-fvFGgF1,"}/*!sc*/
.hAcELG{font-size:50px;color:#0070f3;}/*!sc*/
data-styled.g2[id="pages__Title-sc-eaab758a-0"]{content:"hAcELG,"}/*!sc*/
</style></head>...

This may be to do with hydration too (not sure).

Expected Behavior

I expect no initial flickering in styles when opening a server-side-rendered page.

To Reproduce

1. yarn create next-app --example with-styled-components with-styled-components-app

2. Upgrade React to 18.0.0

3. Run yarn dev

4. Open view-source:http://localhost:3000

5. Observe that there is no style tag <style data-styled="" data-styled-version="5.3.5">...</style>. The whole page source fits one line.

6. Downgrade Next from 12.1.3 to 12.1.2 and confirm the same behavior.

7. Downgrade Next from 12.1.2 to 12.1.1, open view-source:http://localhost:3000 and observe the style tag. The source will span across five lines. This is expected.

The example is too small to observe the actual style flickering, but it is noticeable in a real Next.js app.

Relevant example code:

next.js/examples/with-styled-components/pages/_document.js

Lines 5 to 29 in 9f9214a

	static async getInitialProps(ctx) {
	const sheet = new ServerStyleSheet()
	const originalRenderPage = ctx.renderPage
	try {
	ctx.renderPage = () =>
	originalRenderPage({
	enhanceApp: (App) => (props) =>
	sheet.collectStyles(<App {...props} />),
	})
	const initialProps = await Document.getInitialProps(ctx)
	return {
	...initialProps,
	styles: (
	<>
	{initialProps.styles}
	{sheet.getStyleElement()}
	</>
	),
	}
	} finally {
	sheet.seal()
	}
	}

[ijjk]

Hi, this has been updated in the latest version of Next.js v12.1.4-canary.1, please update and give it a try!

[kachkaev]

Thank you for releasing the fix so quickly! I upgraded to 12.1.4 and all worked! 🎉

[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.