Gatsby.jsでビルド時にlocalStorageのエラーにはuseEffectを使う

gatsby

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を参照できないエラーは回避することが可能です。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.