Fix Uncaught (in promise) TypeError: Cannot read property 'tagName' of null of Next.js

Published by @SoNiceInfo at 4/5/2020


I faced Uncaught (in promise) TypeError: Cannot read property 'tagName' of null error when using Next.js.
Scripts in head tags run before body tag appears was the cause.
I changed inside of head tag in Header.jsx dynamically.

How to dynamically change inside the head tag.

Prepare a components which receives title and description from page dynamically.


  └── Header.jsx
  └── index.jsx


import Head from 'next/head'

const Header = ({ title, description, relpath, relimage }) => (

      <title>{title} - d1v1b</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content="article" />
      <meta property="og:url" content={`` + relpath} />
      <meta property="og:image" content={`` + relimage} />
      <meta property="og:site_name" content={title} />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:url" content={`` + relimage} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={`` + relimage} />
      <meta name="description" content={description} />
      <meta name="theme-color" content="#1e87f0" />
      <link rel="canonical" href={`` + relpath} />
      <link rel="icon" href="/favicon.ico" />
      <link rel="stylesheet" href="/uikit.min.css" />
      <link rel="manifest" href="/manifest.json" />
      <link rel="apple-touch-icon" href="/images/icons/192.png" />


export default Header


import Header from '../../components/en/Header'

const Index = () => (
        <Header title="Index"
        description="This is description"

            Welocome to Index.


export default Index

What's the root cause?

I defined <style jsx></style> in the <Head> to avoid to create css file.
This runs some script in the head before body.
Error dissapeared by deleting the style codes.


vue.jsで"Uncaught TypeError: Cannot read property 'tagName' of null " - 日頃の行い