Next.jsのUncaught (in promise) TypeError: Cannot read property 'tagName' of nullへの対応
Published by @SoNiceInfo at 4/5/2020
このサイトはNext.jsで作られているのですが、Uncaught (in promise) TypeError: Cannot read property 'tagName' of nullというエラーに悩まされていました。
原因はheadタグにかかれているscriptがbodyタグ描画前に発火していることでした。
思い当たるのはHeader.jsxでheadタグの内容を動的に書き換えていることです。
Next.jsでheadタグを動的に書き換える方法
headタグを動的に書き換えるにはページ内容からtitleやdescriptionを受け取るcomponentを用意します。 propsを使ってページ内容からheadタグを含むcomponentへ必要な内容を渡してあげます。
構成
components
└── Header.jsx
pages/
└── index.jsxcomponents/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/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
何が問題だったのか
自分はcssファイルを作るのが面倒でcomponents/Header.jsxの<Head>内で<style jsx></style>を定義していました。
これが原因でheadタグ内でscriptが発火してエラーが出ていたようです。<style jsx></style>を削除したらエラーも消えました。