Gatsbyを試した時につまづいた点に関してまとめます。

実行環境

Gatsby CLI version: 3.13.0
Gatsby version: 3.13.0
node -v: v14.17.6 → v12.22.6
npm -v: 7.24.0

Gatsbyとは？

Reactのフレームワークの1つであり、静的サイトジェネレータです。
https://www.gatsbyjs.com/

背景

今回は、ブログスタータープロジェクトを試しに使ってみました。
https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/

$ npm install -g gatsby-cli
$ gatsby new my-gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd my-gatsby-blog
$ gatsby develop

成功するとhttp://localhost:8000/ にアクセスできるようになりますが、下記のように失敗をしました。

% gatsby develop
  my-gatsby-blog/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Cannot find module 'gatsby-core-utils'
Require stack:
-   my-gatsby-blog/node_modules/babel-plugin-remove-graphql-queries/index.js
-   my-gatsby-blog/node_modules/gatsby/dist/query/file-parser.js
-   my-gatsby-blog/node_modules/gatsby/dist/query/query-compiler.js
-   my-gatsby-blog/node_modules/gatsby/dist/query/query-watcher.js
-   my-gatsby-blog/node_modules/gatsby/dist/services/extract-queries.js
-   my-gatsby-blog/node_modules/gatsby/dist/services/index.js
-   my-gatsby-blog/node_modules/gatsby/dist/state-machines/develop/services.js
-   my-gatsby-blog/node_modules/gatsby/dist/state-machines/develop/index.js
-   my-gatsby-blog/node_modules/gatsby/dist/commands/develop-process.js
-   my-gatsby-blog/.cache/tmp-99967-DhBFRRlzTere
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (  my-gatsby-blog/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (  my-gatsby-blog/node_modules/babel-plugin-remove-graphql-queries/index.js:19:24)
    at Module._compile (  my-gatsby-blog/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (  my-gatsby-blog/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (  my-gatsby-blog/node_modules/gatsby/src/query/file-parser.js:15:5)
    at Module._compile (  my-gatsby-blog/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '  my-gatsby-blog/node_modules/babel-plugin-remove-graphql-queries/index.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/query/file-parser.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/query/query-compiler.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/query/query-watcher.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/services/extract-queries.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/services/index.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/state-machines/develop/services.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/state-machines/develop/index.js',
    '  my-gatsby-blog/node_modules/gatsby/dist/commands/develop-process.js',
    '  my-gatsby-blog/.cache/tmp-99967-DhBFRRlzTere'
  ]
}

解決方法

公式では、Node.jsは12より新しければ問題ないよ！と書いていましたが、GithubのIssuesではバージョンの違いによる挙動の変化が書かれていました。

なので、最新から12へバージョンを変更したところ成功しました。

ちなみに、バージョン管理にVoltaを導入しましたが、かなり手軽にバージョン管理ができて快適でした。

volta pin node@12