😀
Gatsby.jsでビルド時にlocalStorageのエラーにはuseEffectを使う
Gatsby.jsでlocalStorageを使っているとビルド時にエラーが出る場合があります。
開発時にはエラーにならないので気づいにくいですがgatsby buildのコマンドを実行するとエラーになります。
どうすればエラーを回避できるかコードで紹介します。
コンポーネント読み込みの時にlocalStorageを使うとエラー
GatsbyのビルドでlocalStorageのエラーが出るのは下記のようなコードです。
const Sample = () => {
const name = localStorage.getItem('name')
return (
<div>Hello {name}</div>
)
}
レンダリングするタイミングでlocalStorageを参照している場合はコードを変更する必要があります。
そのままビルドしてしまうと下記のようなエラーが発生します。
WebpackError: ReferenceError: localStorage is not defined
useEffectでlocalStorageへの参照のタイミングをずらす
エラーを回避する方法としてuseEffect内でlocalStorageを参照するように変更します。
import { useEffect, useState } from 'react'
const Sample = () => {
const [name, setName] = useState('')
useEffect(() => {
setName(localStorage.getItem('name'))
})
return (
<div>Hello {name}</div>
)
}
useEffectを使うことでGatsbyでビルド時のlocalStaorageを参照できないエラーは回避が可能です。
Discussion