gatsbyにnpmでpluginを追加するとプロジェクトが壊れる話

2020年1月12日の時点で、gatsbyのプロジェクトにnpmでpluginを追加すると、プロジェクトが壊れてしまうようです。

具体的には下記のエラーが出てしまいます。

Error: Cannot find module 'react' - after installing Plugin #18048

再現手順

gatsby new hello
cd hello
gatsby develop

ここまでは大丈夫ですが、そのあと例えばGoogleのフォントを使いたいなと思って下記のものを実行します。

npm install gatsby-plugin-google-fonts --save

gatsby-plugin-google-fonts

すると、reactモジュールがないと言われ初めてしまいます。

$ gatsby develop
...
There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"? Cannot find module 'react'
Require stack:
- /Users/dkato/webspace/hello/node_modules/ink/build/instance.js
- /Users/dkato/webspace/hello/node_modules/ink/build/render.js
- /Users/dkato/webspace/hello/node_modules/ink/build/index.js
- /Users/dkato/webspace/hello/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/loggers/ink/index.js
- /Users/dkato/webspace/hello/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/schema/types/type-defs.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/reducers/inference-metadata.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/reducers/index.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/index.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/utils/webpack.config.js
- /Users/dkato/webspace/hello/node_modules/gatsby/dist/commands/develop.js
- /usr/local/lib/node_modules/gatsby-cli/lib/create-cli.js
- /usr/local/lib/node_modules/gatsby-cli/lib/index.js



  Error: Cannot find module 'react'
  Require stack:
  - /Users/dkato/webspace/hello/node_modules/ink/build/instance.js
  - /Users/dkato/webspace/hello/node_modules/ink/build/render.js
  - /Users/dkato/webspace/hello/node_modules/ink/build/index.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/loggers/ink  /index.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/schema/types/type-defs.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/reducers/inference-metadata.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/reducers/index.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/redux/index.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/utils/webpack.config.js
  - /Users/dkato/webspace/hello/node_modules/gatsby/dist/commands/develop.js
  - /usr/local/lib/node_modules/gatsby-cli/lib/create-cli.js
  - /usr/local/lib/node_modules/gatsby-cli/lib/index.js

暫定的な対策

パッケージマネージャーとしてnpmではなくyarnを使えばいいらしいです。

yarn add gatsby-plugin-google-fonts

すでにnpmでinstallした場合は、下記の方法でpackageを再インストールすれば治りました。

$ rm -Rf node_modules package-lock.json
$ yarn install

リポジトリのIssuesをいくつか見た限りでは、どうやらnpmとyarnで依存関係の解決方法が異なることが原因らしいです。そのうち治るのかな？

環境など

$ node --version
v13.6.0
$ npm --version
6.13.4
$ yarn --version
1.21.1
$ gatsby --version
Gatsby CLI version: 2.8.26
Gatsby version: 2.18.12

macOS 10.15.2

余談

もともとReactを少し触ったことがあったのですが、去年のアドベントカレンダーにハイテンションな記事があったのでGatsbyJSを触り始めました。眺めるだけでも楽しい記事です。

Reactの最強フレームワークGatsby.jsの良さを伝えたい！！