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



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

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

[Error: Cannot find module 'react' - after installing Plugin #18048](https://github.com/gatsbyjs/gatsby/issues/18048)

## 再現手順
```sh
gatsby new hello
cd hello
gatsby develop
```
ここまでは大丈夫ですが、そのあと例えばGoogleのフォントを使いたいなと思って下記のものを実行します。

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

[gatsby-plugin-google-fonts
](https://www.gatsbyjs.org/packages/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を再インストールすれば治りました。

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

https://github.com/gatsbyjs/gatsby/issues/18048#issuecomment-562786372

リポジトリの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の良さを伝えたい！！](https://qiita.com/hppRC/items/00739eaf9ae7fc95c1ca)