Skip to content

<title> shows unwanted comment tags in production environment #36998

@allenchuang

Description

@allenchuang

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 20.6.0: Tue Feb 22 21:10:41 PST 2022; root:xnu-7195.141.26~1/RELEASE_X86_64
Binaries:
Node: 14.15.1
npm: 6.14.16
Yarn: 1.22.4
pnpm: N/A
Relevant packages:
next: 12.1.4
react: 18.0.0
react-dom: 18.0.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

In deployed environment on Vercel: I see comment tags <!-- --> added in the HTML title when i place <title> inside <Head> in next/document. This doesn't seem to happen on local.

<title>My title here<!-- --></title>

I do see the warning that:

"Titles should be defined at the page-level using next/head. See: https://nextjs.org/docs/messages/no-title-in-document-head"

I have since moved the global title to _app.tsx using next/head but wondering if this is still expected behavior

here's what i have in my _document.tsx.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <title>My title here</title>
          <meta
            name="description"
            content="Random description"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Expected Behavior

I should see regular title without comment tags

<title>My title here</title>

To Reproduce

Use the following in your _document.tsx

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <title>My title here</title>
          <meta
            name="description"
            content="Random description"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Activity

added
bugIssue was opened via the bug report template.
on May 17, 2022
c0b41

c0b41 commented on May 18, 2022

@c0b41
Contributor

this issue already fixed #36213 update your next version to v12.1.6

SukkaW

SukkaW commented on Jun 15, 2022

@SukkaW
Contributor

Note: React 18.2.0 also includes a change to help identify the issue: facebook/react#24679
The change won't mitigate the issue for you, but it will print a warning message to your console so you could take an action.

github-actions

github-actions commented on Jul 16, 2022

@github-actions
Contributor

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.

locked as resolved and limited conversation to collaborators on Jul 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @c0b41@allenchuang@timneutkens@SukkaW

        Issue actions

          `<title>` shows unwanted comment tags in production environment · Issue #36998 · vercel/next.js