CI環境で react-scripts build が失敗する場合の場当たり的対処方法

はじめに

先進サービス開発事業部の山岡です。

開発時にローカルの環境では問題無く react-scripts build できるにも関わらず、CircleCIで同様にビルドを行うと Failed to compile. というエラーが発生してしまうという問題が起きました。

同じ問題にハマった人を急いで救うべく場当たり的対処方法を記載しておきます。

エラー発生の状況

ローカルとの環境差分はDockerコンテナ内であるか否かというくらいしかなかったので試しに docker run -it xxx/xxx /bin/bash から起動し手作業でビルドしてみるも上手くいってしまいました。

ではCircleCIの実行環境に由来するのかと circleci local execute してみるも同様に失敗。Dockerコンテナを使っているのになぜこのレイヤーで差分が……？

原因と解決方法

大抵のCIでは自動で環境変数 CI=true が設定されているようで、react-scripts build はこの環境変数が設定されている場合に全てのワーニングをエラー（CI失敗）として扱われるために発生します。

直接の原因はコードの問題で発生していたワーニングなのですが、少々急ぎの事情があり一旦無視せざるを得ない状況。そこでスクリプトを以下のようにエラーが起きる区間だけ CI=false に修正することで暫定対処しました。

- run:
    name: build
    command: |
      npm install
      export CI=false
      npm run build --loglevel silly
      export CI=true

これはひどい

終わりに

いうまでもないことですが、本来はワーニングの解消をすべきなので急場を凌いだらちゃんと直しましょう。