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

Published by @SoNiceInfo at 4/5/2020


Error

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.

Directory

components
  └── Header.jsx
pages/
  └── index.jsx

components/Header.jsx

import Head from 'next/head'

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

  <Head>
      <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={`https://d1v1b.com` + relpath} />
      <meta property="og:image" content={`https://d1v1b.com` + relimage} />
      <meta property="og:site_name" content={title} />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:url" content={`https://d1v1b.com` + relimage} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={`https://d1v1b.com` + relimage} />
      <meta name="description" content={description} />
      <meta name="theme-color" content="#1e87f0" />
      <link rel="canonical" href={`https://d1v1b.com` + 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" />
  </Head>

)

export default Header

pages/index.jsx

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

const Index = () => (
    <>
        <Header title="Index"
        description="This is description"
        relimage="/images/index.png"
        relpath="/"
        />

        <h1>Index</h1>
        <p>
            Welocome to Index.
        </p>

    </>
)

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.

References

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

"SoNice!" and "Road2SwiftUI" are related to iOS and Web.
Privacy Policy