<title> tag renders a html comment causing a webpack warning

[koenpunt]

Verify canary release

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

Provide environment information

$ npx next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 16.13.0
  npm: 8.1.4
  Yarn: 1.22.17
  pnpm: 6.30.0
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.0", newest: "12.3.2-canary.43".
    Please try the latest canary version (`npm install next@canary`) to confirm the issue 
still exists before creating a new issue.
    Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chome

How are you deploying your application? (if relevant)

No response

Describe the Bug

I have a page title set like this

<title>{post.title} | Website Name</title>

But with Next 13 it renders like so:

<title>Some title<!-- --> | Website Name</title>

And prints the following warning in the terminal:

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering
    at title
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:279:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:678:104)
    at MyDocument (webpack-internal:///./src/pages/_document.tsx?__sentry_wrapped__:21:1)

Expected Behavior

It renders without the comment:

<title>Some title | Website Name</title>

And no warning.

Link to reproduction

https://github.com/koenpunt/nextjs13-title-issue

To Reproduce

Run the reproduction application and you'll see the warning when opening http://localhost:3000/example

[andersonba]

Also experiencing this

[andersonba]

A temporary fix:

<title>{`${post.title} | Website Name`}</title>

🤷‍♂️

[ariona]

2023 and still have this issue

[nawok]

Same thing on [email protected] with swcMinify: true. The interpolation trick from @andersonba helps.

[gkostov]

The problem comes from ReactDOMServer https://github.com/facebook/react/blob/4a1cc2ddd035f5c269e82ab6f7686e2e60d3b3ea/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js#L1962 and I see nothing that can be done to suppress this warning (other that getting around it with hacks like the one above).

[koenpunt]

The problem comes from ReactDOMServer

The error is thrown there. However I believe the problem is Next specific, so the rendering of Next might be messing up proving the document to the renderer?