CODEWITHSUNDEEP
javascriptnext.jshead
Michal K
Michal K

Reputation: 243

Warning: next-head-count is missing

I'm using a custom _document.js from Next documentation. In result, I keep getting a warning message printed out to the console. I've tried to restart my server and emptied my browser's cache. My _document.js is inside a "pages" folder as it should be. I made sure that the file is being readen by adding some tags to my <Head> and inspecting my website to see if the tag is being added to the <Head>. (My website is working correctly I'm just tired of this warning message.)

Console warning:

Warning: next-head-count is missing. https://err.sh/next.js/next-head-count-missing

This is my _document.js file:

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Upvotes: 11

Views: 21592

Answers (7)

Netinel
Netinel

Reputation: 111

I had the same issue and it was related to the <html lang="en" /> inside the <Head> tag.

Upvotes: 6

Leo Getz
Leo Getz

Reputation: 79

For me, I had a custom component <MobileView> in the <Head>. So changing that did the trick.

Upvotes: 0

A. Askarov
A. Askarov

Reputation: 715

In my case, there was an incorrect html tag inside next's Head component. 90% of this error means that something wrong with the content inside Head. Try to remove elements inside Head one by one and you will find what causes the issue.

Upvotes: 3

M.Islam
M.Islam

Reputation: 1680

In my case "Convert HTML to JSX" vscode extension added a wrapper div tag in the next/head component. I removed div tag and the warning gone.

Upvotes: 1

eliastouil
eliastouil

Reputation: 559

In my case, the Head component imported from next/Document was in the custom _document, but it was within the body tag, moving it within the Html component and outside of the body tag fixed it.

// Incorrect
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <body>
          <Head />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


// Correct
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Upvotes: 1

Rishit Sinha
Rishit Sinha

Reputation: 455

This error also shows up when an unsupported html tag is entered added into the <Head> tag.

In my case I had accidentally added a <p>...</p> tag within the <Head>...</Head> tag in a component, which was throwing this error.

Upvotes: 12

Michal K
Michal K

Reputation: 243

Apparently I had a <head> tag inside index.html as well. After removing it the error was gone. There is nothing wrong with my _document.js. I was importing style in a separate <head> inside index.js, that's why the error occurred.

Solution: I moved <head> content from index.js to _document.js and removed the <head> tag from index.js.

Upvotes: 6

Related Questions