Next.js: Head-manager: TypeError: Cannot read property 'content' of null

Created on 2 Aug 2019 · 12Comments · Source: vercel/next.js

seems to work as expected but I see this error in the console and it seems like coming from nextjs.

if there is an error on my side, the error message should do a better job describing possible issues and hint what needs to be fixed
if error is on nextjs side it should be fixed

tried to isolate the issue and find when it happens. I removed all the surrounding code from _app.js

class MyApp extends App {
  render() {
    return (
      <div>
        <InitialHead/>
        #wefklj hi 123
      </div>
    );
  }
}

and InitialHead works perfectly fine, it's code:

import React from 'react';
import Head from 'next/head';
// import {NODE_ENV} from '../config';

// import Layout from 'components/Layout';
class InitialHead extends React.Component {
  render() {
    return (
      <Head>
        <title key={'title'}>Foo</title>
      </Head>
    );
  }
}

export default InitialHead;

The title is updated to "Foo"

"next": "^9.0.3",
macos 10.14.6
Chrome Version 76.0.3809.87 (Official Build) (64-bit)

Source

liesislukas

Most helpful comment

the issue is that I didn't add head to _document but _app and other places. It would be awesome if that error would provide a hint that it needs to be in _document only.

also, this definitely should be somewhere in the documentation:
Question:

import {Head} from 'next/document';
import Head from 'next/head';

when & which one should be used?

Hi, the difference between the two is the places they are meant to be used. The Head export from next/document is only meant for usage in _document. The Head export from next/head is meant for usage elsewhere in your app

https://spectrum.chat/next-js/general/whats-the-difference-between-these-imports~548d0862-72a5-4980-ac58-55f4445bdee4

liesislukas on 2 Aug 2019

👍4

All 12 comments

On page, I have an svg logo image (simple img tag). It has some inline styles and some styles included from the scss file. Both places defined the max-width/height of the image.

None works until i add <Head></Head> to _document.js render 🤔

Also can't find any documentation on why at _document Head is included as:

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

and in another place as:

import Head from 'next/head';

this inside has link to next-server module.exports = require('next-server/head')

while {Head} from the next/document seems like has no link to next-server package.

What's the difference, when use which?
What is next-server package? Why it has no description even it's used a lot? 160k weekly downloads #8221

https://www.npmjs.com/package/next-server

liesislukas on 2 Aug 2019

Please follow the issue template and provide a full reproduction.

timneutkens on 2 Aug 2019

👎8 👍1

the issue is that I didn't add head to _document but _app and other places. It would be awesome if that error would provide a hint that it needs to be in _document only.

also, this definitely should be somewhere in the documentation:
Question:

import {Head} from 'next/document';
import Head from 'next/head';

when & which one should be used?

Hi, the difference between the two is the places they are meant to be used. The Head export from next/document is only meant for usage in _document. The Head export from next/head is meant for usage elsewhere in your app

https://spectrum.chat/next-js/general/whats-the-difference-between-these-imports~548d0862-72a5-4980-ac58-55f4445bdee4

liesislukas on 2 Aug 2019

👍4

To add/respond to @liesislukas, I looked into this a bit more at the code level, and the reason this is all happening (I missed it too!) is that the base _document.js that next.js creates internally creates a dependency meta[name=next-head-count] selector that head-manager depends upon and fails on if not created properly.

The doc https://nextjs.org/docs#custom-document has a very good example to build upon and has the line:

All of <Html />, <Head />, <Main /> and <NextScript /> are required for page to be properly rendered.

Also in that example, there's the import

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

Once I utilized and imported properly, the error went away.

TLDR - If you create a _document.jsx at all, ensure it's actively using the correctly imported elements named above to render your own custom doc. (@timneutkens your comment was absolutely correct but I feel the doc reference may help further)

barrymay on 6 Aug 2019

This errors happens because I use 'next/head' in other places rather than _document or _app.

chuyik on 7 Aug 2019

👍1

Seems reasonable that this should just warn. I’ll put up a PR later today

devknoll on 7 Aug 2019

👍1

@devknoll
After review I find that meta[next-head-count] could be under <body /> rather than <head /> if we use html conditional comments.

Here's the reprodution:

_pages/index.js

import Head from 'next/head'

function Index () {
  return (
    <div>
      <Head>
        <div
          dangerouslySetInnerHTML={{
            __html: `
    <!--[if lt IE 10]>
      <style>
        .ant-modal {
          top: 300px\\9;
        }
      </style>
    <![endif]-->
    `,
          }}
        />
      </Head>
      nihao HEllo
    </div>
  )
}

export default Index

Screenshot

chuyik on 8 Aug 2019

It's actually not put under body, you're injecting invalid html (<div> into the document head, which then shows wrong in Chrome devtools.

timneutkens on 8 Aug 2019

Just my 2 cents, but I think a better solution for all this is a warning if next finds that the _document.tsx doesn't have the expected (and properly imported) React components in the template.

I appreciate the PR (https://github.com/zeit/next.js/pull/8276) but I feel the warning output is too low level for the actual dev to realize how to fix it.

Alternatively, maybe this could be an eslint plugin rule, if there's any thought to creating a plugin...

barrymay on 8 Aug 2019

i found same issue, when i put javascript code inside <head> </head> and the solution i put the code outside <head> </head> , error solved
Screenshot from 2020-01-17 13-24-47

derit on 17 Jan 2020

🎉2

I found this error at nextjs antd-mobile example.

// examples/with-antd-mobile/pages/_app.js
<Head>
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
        />
    <style global jsx>{`
        html,
        body {
            font-family: 'Helvetica Neue', 'Hiragino Sans GB', Helvetica, 'Microsoft YaHei', Arial;
            margin: 0;
        }
    `}</style>
</Head>

chungheepark on 5 May 2020

👍1

head-manager.ts:52 Uncaught (in promise) TypeError: Cannot read property 'tagName' of null
at updateElements (head-manager.ts:52)
at head-manager.ts:100
at Array.forEach ()
at head-manager.ts:99