Server response is broken with multi-byte characters and React 18.0.0

[3c1u]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:36:53 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.3-canary.0
  react: 18.0.0
  react-dom: 18.0.0

What browser are you using? (if relevant)

Firefox 98.0.2

How are you deploying your application? (if relevant)

next dev

Describe the Bug

The sever response with multi-byte characters seems to be broken.

This causes the following hydration error:

Warning: Text content did not match. Server: "アイウエオアイウエオアイウエオアイウオ" Client: "アイウエオアイウエオアイウエオアイウエオ"
p
main
div
Home
MyApp@webpack-internal:///./pages/_app.tsx:34:21
ErrorBoundary@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638
ReactDevOverlay@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23177
Container@webpack-internal:///./node_modules/next/dist/client/index.js:323:24
AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:822:20
Root@webpack-internal:///./node_modules/next/dist/client/index.js:946:21 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected Behavior

The hydration error should not be occurred. The server response should not contain garbage characters.

To Reproduce

https://github.com/3c1u/nextjs-mb-error-test

[martinnabhan]

We're encountering the same error after upgrading to React 18.

I found that if you remove next.config.js it works fine.
As soon as you add next.config.js, even if the file is empty, the above error happens.

I've recreated the error here: https://codesandbox.io/s/stupefied-parm-52t3od
If you remove or rename next.config.js the error disappears.

Interestingly, just by adding an empty next.config.js you get the message "You have enabled experimental feature(s)." which seems to be related.

[martinnabhan]

After looking into the configuration being loaded, it turns out adding an empty next.config.js makes experimental.reactRoot become true, which seems to be the cause of the problem.

This might be a react bug.

[3c1u]

By removing next.config.js the error disappeared. Turning off experimental.reactRoot doesn't seem to work though.

[martinnabhan]

Seems like even if you set experimental.reactRoot to false, reactRoot still gets enabled.

I added console.log(reactRoot) right before this line:

next.js/packages/next/server/render.tsx

Line 465 in a00268e

const hasConcurrentFeatures = reactRoot

and reactRoot was still true.

If you set hasConcurrentFeatures to false Next.js will use ReactDOMServer.renderToString instead of ReactDOMServer.renderToReadableStream, which makes the error disappear:

next.js/packages/next/server/render.tsx

Line 1356 in a00268e

if (hasConcurrentFeatures) {

Makes me think this might be a bug of ReactDOMServer.renderToReadableStream.

[gio-work]

@martinnabhan This is likely due to the use of shouldUseReactRoot
https://github.com/vercel/next.js/search?q=shouldUseReactRoot

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