Head-manager: TypeError: Cannot read property 'content' of null #8220

liesislukas · 2019-08-02T14:30:40Z

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)

The text was updated successfully, but these errors were encountered:

liesislukas · 2019-08-02T14:35:41Z

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 next-server has no description/docs #8221

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

timneutkens · 2019-08-02T15:02:16Z

Please follow the issue template and provide a full reproduction.

liesislukas · 2019-08-02T18:58:46Z

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

barrymay · 2019-08-06T14:28:52Z

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)

devknoll · 2019-08-07T12:58:30Z

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

timneutkens · 2019-08-08T13:36:02Z

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

barrymay · 2019-08-08T19:36:09Z

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 (#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...

derit · 2020-01-17T06:29:41Z

i found same issue, when i put javascript code inside <head> </head> and the solution i put the code outside <head> </head> , error solved

chungheepark · 2020-05-05T05:04:28Z

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>

anasalpure · 2020-09-09T11:53:49Z

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

--I solve this problem by remove this line

in <Header> => next/head

balazsorban44 · 2022-01-29T13:06:37Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens closed this as completed Aug 2, 2019

devknoll mentioned this issue Aug 7, 2019

Add warning for missing <Head> #8276

Merged

ermolaevalexey mentioned this issue Jan 12, 2021

Head-manager: Add support of next-head-count query selector in the whole document #21020

Closed

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Head-manager: TypeError: Cannot read property 'content' of null #8220

Head-manager: TypeError: Cannot read property 'content' of null #8220

liesislukas commented Aug 2, 2019 •

edited

liesislukas commented Aug 2, 2019 •

edited

timneutkens commented Aug 2, 2019

liesislukas commented Aug 2, 2019

barrymay commented Aug 6, 2019 •

edited

devknoll commented Aug 7, 2019

timneutkens commented Aug 8, 2019

barrymay commented Aug 8, 2019 •

edited

derit commented Jan 17, 2020

chungheepark commented May 5, 2020

anasalpure commented Sep 9, 2020 •

edited

balazsorban44 commented Jan 29, 2022

Head-manager: TypeError: Cannot read property 'content' of null #8220

Head-manager: TypeError: Cannot read property 'content' of null #8220

Comments

liesislukas commented Aug 2, 2019 • edited

liesislukas commented Aug 2, 2019 • edited

timneutkens commented Aug 2, 2019

liesislukas commented Aug 2, 2019

barrymay commented Aug 6, 2019 • edited

devknoll commented Aug 7, 2019

timneutkens commented Aug 8, 2019

barrymay commented Aug 8, 2019 • edited

derit commented Jan 17, 2020

chungheepark commented May 5, 2020

anasalpure commented Sep 9, 2020 • edited

--I solve this problem by remove this line

balazsorban44 commented Jan 29, 2022

liesislukas commented Aug 2, 2019 •

edited

liesislukas commented Aug 2, 2019 •

edited

barrymay commented Aug 6, 2019 •

edited

barrymay commented Aug 8, 2019 •

edited

anasalpure commented Sep 9, 2020 •

edited