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

この記事をシェアする
この記事のタイトルとURLをコピーする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。