craco を導入した React アプリを Heroku へのデプロイしようとしたらエラーになる
事象
構成はちゃんとバージョンなども詳しく書きたいけど大雑把にいうと create-react-app + typescript + craco っていう構成のWEBアプリをHerokuにデプロイ( git push heroku master 実行)した際に以下のようなエラーが発生した
remote: -----> Installing dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v1.22.19
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: [3/4] Linking dependencies...
remote: warning " > @testing-library/user-event@14.2.1" has unmet peer dependency "@testing-library/dom@>=7.21.4".
remote: warning " > react-hooks-use-modal@2.1.0" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
remote: warning " > react-hooks-use-modal@2.1.0" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
remote: warning " > react-lottie@1.2.3" has incorrect peer dependency "react@^0.14.7 || ^15.0.0 || ^16.0.0".
remote: warning " > styled-components@5.3.5" has unmet peer dependency "react-is@>= 16.8.0".
remote: warning " > @typescript-eslint/eslint-plugin@5.29.0" has unmet peer dependency "@typescript-eslint/parser@^5.0.0".
remote: warning " > @typescript-eslint/eslint-plugin@5.29.0" has unmet peer dependency "eslint@^6.0.0 || ^7.0.0 || ^8.0.0".
remote: warning "@typescript-eslint/eslint-plugin > @typescript-eslint/type-utils@5.29.0" has unmet peer dependency "eslint@*".
remote: warning "@typescript-eslint/eslint-plugin > @typescript-eslint/utils@5.29.0" has unmet peer dependency "eslint@^6.0.0 || ^7.0.0 || ^8.0.0".
remote: warning "@typescript-eslint/eslint-plugin > @typescript-eslint/utils > eslint-utils@3.0.0" has unmet peer dependency "eslint@>=5".
remote: warning " > eslint-config-prettier@8.5.0" has unmet peer dependency "eslint@>=7.0.0".
remote: [4/4] Building fresh packages...
remote: Done in 34.76s.
remote:
remote: -----> Build
remote: Running build (yarn)
remote: yarn run v1.22.19
remote: $ craco build
remote: craco: *** Cannot find ESLint loader (eslint-loader). ***
remote: The following changes are being made to your tsconfig.json file:
remote: - compilerOptions.paths must not be set (aliased imports are not supported)
remote:
remote: (node:1581) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /tmp/build_6f233664/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
remote: Update this package.json to use a subpath pattern like "./*".
remote: (Use `node --trace-deprecation ...` to show where the warning was created)
remote: Creating an optimized production build...
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist@latest --update-db
remote:
remote: Why you should do it regularly:
remote: https://github.com/browserslist/browserslist#browsers-data-updating
remote: Compiled with warnings.
対処法
- 環境変数
DISABLE_ESLINT_PLUGINを設定する -
craco.config.jsを編集する - Buildpacks を入れる
環境変数 DISABLE_ESLINT_PLUGIN を設定する
Heroku のダッシュボードから対象のアプリ選択して Settings のタブで環境変数を設定する。
（もしくは CLI 経由で設定する）
今回は DISABLE_ESLINT_PLUGIN を true とした。
craco.config.js を編集する
module.exports = {
// ...
// これを追加
eslint: {
enable: false,
},
// ...
};
Buildpacks を入れる
これも管理画面の Settings や CLI にて。
今回は以下の2つを入れた。
もしかしたら不要なステップもあるかも。また起こりそうだからほぼ自分用にメモ
無駄にはまって休日の貴重な時間を浪費したわい。けどとりあえずはうまくいったぞ。
詳しいことは聞かんでくれ😅
2022/07/25 追記
実は上記のままだと Error: React Refresh runtime should not be included in the production bundle. みたいなエラーがまだ出ます。
まあこれはすぐわかってproduction環境なのに開発用のサーバーが動いているみたいな原因だと思いました。
なので対症療法として NODE_ENV に development を指定したりして動くようにしてました。
個人的にはproductionって言っても世間に公開するものではなくHerokuにデプロイして個人のスマホなどで見れたらいいやっていう状況だったのでこれでも良かったんですがやっぱり行儀良くないと思うので
一応以下の手順でproduction用にワークさせることはできます。
serve のインストール
yarn add serve
npm 使ってる人は適当に置換してください。
package.json に本番用のコマンド追加
適当な位置に本番用のコマンドを追加します。
"scripts": {
"start": "craco start",
+ "start:prod": "craco build && serve -s ./build",
Procfile の追加
前節で定義したコマンドが実行されるようにこのファイルを追加
web: npm run start:prod
不要なビルドパックの削除
この設定で動かそうとすると以前入れた以下のビルドパックが入ってるとエラーになったので消しました。
僕の環境ではここまでやって git push heroku master でデプロイしたら本番モードで動きました。
Production特有の設定はまだ理解が浅いのでこれでいいのかわかりませんが一応残しておきます。
後日正式に調べる予定！
参考
Discussion