ReactのDockerコンテナを起動したらエラーで落ちてしまう

## 問題

`docker-compose up`でReactのコンテナを立ち上げようとするとエラーで落ちてしまう

## 解決策
#### yarnを使用している場合
`node_modules`ディレクトリと`yarn.lock`を削除して`yarn install`

#### npmを使用している場合
`node_modules`ディレクトリと`package.json.lock`を削除して`npm install`

その後バージョンのずれが生じている場合、必要なバージョンのライブラリをインストール
今回は`babel-loader:8.1.0`をインストール

## **経緯**

`docker-compose up`でfront(React)のコンテナを起動すると
```
front  | Failed to compile.
front  |
front  | ./node_modules/react-dev-utils/webpackHotDevClient.js
front  | TypeError: validateOptions is not a function
front  |     at Generator.next (<anonymous>)
front  |     at new Promise (<anonymous>)
```

エラーでfrontのコンテナが落ちてしまう。。。

`node_modules`の中身が怪しいので、`node_modules`と`yarn.lock`を削除して`yarn install`でそれらを再生成してみる。

再生成されたyarn.lockをもとにdockerイメージを作成して`docker-compose up`を実行すると今度は別のエラー
```
front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  |
front  | The react-scripts package provided by Create React App requires a dependency:
front  |
front  |   "babel-loader": "8.1.0"
front  |
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |
front  |   /front/node_modules/babel-loader (version: 7.1.5)
front  |
front  | Manually installing incompatible versions is known to cause hard-to-debug issues.
front  |
front  | If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
front  | That will permanently disable this message but you might encounter other issues.
front  |
front  | To fix the dependency tree, try following the steps below in the exact order:
front  |
front  |   1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
front  |   2. Delete node_modules in your project folder.
front  |   3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
front  |   4. Run npm install or yarn, depending on the package manager you use.
front  |
front  | In most cases, this should be enough to fix the problem.
front  | If this has not helped, there are a few other things you can try:
front  |
front  |   5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
front  |      This may help because npm has known issues with package hoisting which may get resolved in future versions.
front  |
front  |   6. Check if /front/node_modules/babel-loader is outside your project directory.
front  |      For example, you might have accidentally installed something in your home folder.
front  |
front  |   7. Try running npm ls babel-loader in your project folder.
front  |      This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
front  |
front  | If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
front  | That would permanently disable this preflight check in case you want to proceed anyway.
front  |
front  | P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
front  |
```
react-scriptsを使うには`"babel-loader": "8.1.0"`が必要だけど、node_modulesに入ってるのは`"babel-loader":7.1.5`だよとのこと。

`"babel-loader": "8.1.0"`がインストールされるようにpackage.jsonに記述してあげる。

```json
"devDependencies": {
    "babel-loader": "8.1.0",
    .
    .
    .
}
```

これをもとにdockerイメージを作成
`docker-compose up`を実行してコンテナを立ち上げてみる。

これでエラーは出なくなりました。お疲れ様でした！

## 参考にさせていただいた記事

[https://mebee.info/2020/03/03/post-6791/](https://mebee.info/2020/03/03/post-6791/)

[https://dev.classmethod.jp/articles/cant-do-npm-start-when-start-react/](https://dev.classmethod.jp/articles/cant-do-npm-start-when-start-react/)