Q&A
ローカル開発では npm と yarn どちらをお使いですか？
(yarn だと yarn start や yarn buld もエラーになるのでは…。)
前提・実現したいこと
Udemyの教材で、reactアプリケーションを作成しました。
react×TypeScriptのアプリケーションです。
yarn create react-app 実行して作成しています。
アプリケーションを一通り作成し終えたので、vercelでデプロイしようとしたところ、ビルド時に以下のようなエラーが発生しました。
ローカルでyarn buildを実行すると成功するのですが、vercel上ではビルドがうまくいきません。
初心者ゆえ、基礎中の基礎でつまづいているかもしれませんが、ご教授いただけると幸いです。
発生している問題・エラーメッセージ
エラーメッセージ 15:28:10.994 Cloning github.com/suzu1997/user-management-app (Branch: main, Commit: e365f9b) 15:28:11.645 Cloning completed: 650.941ms 15:28:11.694 Analyzing source code... 15:28:13.361 Installing build runtime... 15:28:17.560 Build runtime installed: 4198.792ms 15:28:21.471 Looking up build cache... 15:28:22.012 Build cache not found 15:28:23.233 Detected package.json 15:28:23.233 Installing dependencies... 15:28:23.581 yarn install v1.22.10 15:28:23.663 [1/4] Resolving packages... 15:28:24.225 [2/4] Fetching packages... 15:28:47.488 info fsevents@2.3.2: The platform "linux" is incompatible with this module. 15:28:47.488 info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation. 15:28:47.497 info fsevents@1.2.13: The platform "linux" is incompatible with this module. 15:28:47.497 info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. 15:28:47.512 [3/4] Linking dependencies... 15:28:47.514 warning " > @chakra-ui/icons@1.0.8" has unmet peer dependency "@chakra-ui/system@>=1.0.0". 15:28:47.515 warning "@chakra-ui/icons > @chakra-ui/icon@1.1.4" has unmet peer dependency "@chakra-ui/system@>=1.0.0". 15:28:47.524 warning "@emotion/styled > @emotion/babel-plugin@11.2.0" has unmet peer dependency "@babel/core@^7.0.0". 15:28:47.524 warning "@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0". 15:28:47.524 warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4". 15:29:06.995 [4/4] Building fresh packages... 15:29:07.663 Done in 44.09s. 15:29:07.882 Running "yarn run build" 15:29:08.062 yarn run v1.22.10 15:29:08.090 $ react-scripts build 15:29:09.545 Creating an optimized production build... 15:29:33.752 Failed to compile. 15:29:33.753 Failed to load config "react-app" to extend from. 15:29:33.753 Referenced from: /vercel/path0/.eslintrc.js 15:29:33.795 error Command failed with exit code 1. 15:29:33.796 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 15:29:33.810 Error: Command "yarn run build" exited with 1
該当のソースコード
.eslintrc.js
module.exports = { "plugins": ["prettier"], "extends": ["react-app", "prettier"], "rules": { "prettier/prettier": "error" } }
package.json
{ "name": "user-management-app", "version": "0.1.0", "private": true, "dependencies": { "@chakra-ui/icons": "^1.0.8", "@chakra-ui/react": "^1.4.1", "@emotion/react": "^11", "@emotion/styled": "^11", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.7", "axios": "^0.21.1", "eslint-config-airbnb": "^18.2.1", "framer-motion": "^4", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.20.0", "@typescript-eslint/parser": "^4.20.0", "eslint": "^7.23.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-prettier": "^3.3.1", "prettier": "^2.2.1" } }
試したこと
出てきたエラーをネットで調べて様々な記事を調べてみましたが、解決策が発見できませんでした。
”Failed to load config "react-app" to extend from.”
"Referenced from: /vercel/path0/.eslintrc.js"とあるので、
設定やeslintを色々といじってみましたが解決しませんでした。
補足情報（FW/ツールのバージョンなど）
ローカルでyarn startやyarn buildを実行した時には成功しています…。
ご一読、そして反応いただきありがとうございます。
ローカル環境では、yarnを使用しています。
その package.json を使って yarn で試したら、yarn start や yarn buld がエラーになったので…。
たぶん prettier を入れる時に次の記事を参考にして npm install したのでは？
https://qiita.com/ikngtty/items/4df2e13d2fa1c4c47528#%E6%89%8B%E9%A0%86%E3%81%BE%E3%81%A8%E3%82%81
試していただけたのですね、ありがとうございます。
ただ、私の方で実行すると、ローカルではyarn startもyarn buildも成功するんですよね…。
prettierをyarnでインストールし直してみた方が良いということでしょうか…？？
yarn create react-app → npm install → yarn build だとうまくいきますね。
たぶん、node_modules と yarn.lock (と、package-lock.json があればそれも) を削除して yarn install しなおしたらエラーが再現できると思います。
で、エラーの原因は yarn と npm のパッケージ管理方法の違いによるもので、yarn install eslint-config-react-app すると直るのでは。
ありがとうございました！ご教授いただいた通りインストールし直したあと、異なるエラーが出たのですが、調べながら試行錯誤していたところ、無事デプロイできました✨
自己解決
