MK Dev

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

  • Gatsby

シェア

この記事を書いた人

Koji Murakami

React.jsとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScript(TypeScript)の設計実装をメインにしながら、RubyやNodeでサーバーサイドのAPI作ったりフルスタックな動きもしています。

関連記事

Web開発のお仕事をお受けてしています。

フリーランスのエンジニアとして、フロントエンドを中心としたWeb開発のお手伝いをさせていただいております。
できることや単価など詳しい情報は下記をご覧ください。