かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React TypeScript で作ったアプリがビルドできないにハマる

npx create-react-app --template typescript で作成した TypeScript の React アプリでビルド時に初めて出会うエラーになってしまったのでメモ

  • "react": "^17.0.2",
  • "react-dom": "^17.0.2",
  • "typescript": "^4.1.2",

build 時に Could not find a required file. と言われる

yarn start をして開発環境では何もエラーになっていないプロジェクトを build しようとしたら下記のようなエラーになりました。

$ yarn build
yarn run v1.22.17
$ react-scripts build
Could not find a required file.
  Name: index.js
  Searched in: /Users/kikiki/pgoject/react-app/src
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

エントリーポイントである index.js が見つからないらしい…
TypeScript プロジェクトだと index.tsx がエントリーポイントになっているはずなのにな〜ぜ〜だ〜

react-scripts のバージョンが問題だった

Create React App Docs would be to change the version of react-scripts in the package.json file to the most recent stable version like "react-scripts": "^4.0.3". Then, run npm install from the command line.
cf. reactjs - Could not find a required file. - Adding TypeScript to React project - Stack Overflow

package.json を見てみると react-scripts のバージョンが ^0.9.5 になっていました!古っ!!!
git の履歴をさかのぼってみると create-react-app をした段階では "react-scripts": "4.0.3" だったものが、なにかのライブラリをインストールしてやっぱ使わないとアンインストールした際に "react-scripts": "^0.9.5" に依存関係か何かで変更されてそのままになっていたようでした。

解決方法 "react-scripts": "4.0.3" にして npm install を行う

package.jsonreact-scripts のバージョンを "4.0.3" に変更して npm install をします。

  "dependencies": {
    …
-   "react-scripts": "^0.9.5",
+   "react-scripts": "4.0.3",
  }

react-scripts のバージョンが戻ったので再度 yarn build を実行した所問題なくビルドすることができました。

create-react-app で作ったプロジェクトが build できない時は react-scripts のバージョンを疑ってみる

何のパッケージが原因でそうなったのか本当に分らない… おわり。


[参考]

今日はビルドファイトだったな… (違う