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