質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

4946閲覧

Reactアプリケーションがvercelにデプロイできない。(ビルド時にエラーが発生)

CHIESUZUHARA

総合スコア0

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/04/06 06:50

編集2021/04/06 09:32

前提・実現したいこと

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を実行した時には成功しています…。
実行時のコマンド

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/04/06 07:42

ローカル開発では npm と yarn どちらをお使いですか? (yarn だと yarn start や yarn buld もエラーになるのでは…。)
CHIESUZUHARA

2021/04/06 08:19

ご一読、そして反応いただきありがとうございます。 ローカル環境では、yarnを使用しています。
CHIESUZUHARA

2021/04/06 09:28

試していただけたのですね、ありがとうございます。 ただ、私の方で実行すると、ローカルではyarn startもyarn buildも成功するんですよね…。 prettierをyarnでインストールし直してみた方が良いということでしょうか…??
hoshi-takanori

2021/04/06 09:35

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 すると直るのでは。
CHIESUZUHARA

2021/04/07 05:30

ありがとうございました!ご教授いただいた通りインストールし直したあと、異なるエラーが出たのですが、調べながら試行錯誤していたところ、無事デプロイできました✨
guest

回答1

0

自己解決

「質問への追記・修正の依頼」の欄で解決済み。

投稿2021/05/12 11:24

CHIESUZUHARA

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問