Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

<Head> 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)

Issue Analytics

State:
Created 4 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

18reactions

timneutkenscommented, Aug 2, 2019

Please follow the issue template and provide a full reproduction.

11reactions

liesislukascommented, Aug 2, 2019

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

Top Results From Across the Web

"TypeError: Cannot read property 'content' of null" Running in ...

Solved, i ignored the errors. I have 2 more test suites who import the component, and missed document.head.innerHTML. Thank you :) – FlyOverDevs....

Uncaught TypeError: Cannot read property of null - iDiallo

You are accessing a property of an object that is null. For example, document.getElementById('stuff') returns null. So adding .value will cause ...

TypeError: Cannot read property 'value' of Null in JS

There are 2 main reasons the "Cannot read property 'value' of null" error occurs: Accessing the value property on a null value (DOM...

Uncaught TypeError cannot read property 'addeventlistener' of ...

In JavaScript, a very common error is the Uncaught TypeError Cannot read property 'addeventlistener' of null. This error occurs when JavaScript is not...

How To Fix Cannot Read Property 'style' of Null in JavaScript

A common error you might run into while trying to do this is Uncaught TypeError: Cannot read properties of null (reading 'style') ....