Gatsbyの開発環境で変更が即時反映されない時の対処法

目次

• 解決方法
• まとめ

Gatsby の開発環境で変更が即時反映されなかった。

こちら（Gatsby で、変更が更新されない場合の対処法（開発時））の記事によると、キャッシュを削除して再度サーバーを立てれば直るとのこと。

$ gatsby clean
$ gatsby develop

……直らんのだが。

解決方法

いろいろ試しているうちにページ側では問題が発生せず、コンポーネントの変更のみ反映されないことがわかった。

Hot Reloading Not Working #13918

続けて見つけた上記 issue によると、

import Header from './header
// 👆 これは動かない

import Header from './header/header
// 👆 こっちは正常に動作

だそう。つまり、import 文を見てみれば良い、と。

import Hoge from "../components/hoge/index.js";
// 👆 こうなっていた

import Hoge from "../components/Hoge/index.js";
// 👆 正しくはこうだった

ってな具合に、大文字小文字の誤字ありました。正常に呼び出せてるから誤字なんて疑いもしなかった……。Gatsby ではパスの大文字小文字を間違えても動作はするけど完全に正しい挙動をとるとは限らないのですね。

まとめ

人間（僕）の手はクソ。パス周りの VScode 拡張入れてるんですけどたまーに手打ちしたらこれだよ。