問題
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に記述してあげる。
"devDependencies": {
"babel-loader": "8.1.0",
.
.
.
}
これをもとにdockerイメージを作成
docker-compose upを実行してコンテナを立ち上げてみる。
これでエラーは出なくなりました。お疲れ様でした！
参考にさせていただいた記事
https://mebee.info/2020/03/03/post-6791/
https://dev.classmethod.jp/articles/cant-do-npm-start-when-start-react/