React + Emotionで作ったアプリがGitHub Actionsでハマった

はじめに

ReactアプリにEmotionを導入して、GitHub ActionsでCI/CD環境構築しようとしたらちょっとハマってしまいました。
ハマったポイントと解決方法を記事にします。

ハマったポイント

まずは私が何をしてどうハマったのか書いていきます。

使おうとしたワークフロー

私はこんなワークフローを使おうとしていました。

name: Firebase Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
        env:
          REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}
          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}
          REACT_APP_FIREBASE_APP_ID: ${{ secrets.REACT_APP_FIREBASE_APP_ID }}
          REACT_APP_FIREBASE_CONTINUE_URL: ${{ secrets.REACT_APP_FIREBASE_CONTINUE_URL }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

これでいけるやろ！と思っていざプッシュしたところ…

発生したエラー

ワークフローの実行結果を確認すると、ビルドが失敗していました。

Run npm run build

// 中略

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

./src/containers/loginForm.tsx
  Line 2:8:  'React' is defined but never used  @typescript-eslint/no-unused-vars

./src/components/loginForm.tsx
  Line 2:8:  'React' is defined but never used  @typescript-eslint/no-unused-vars

『環境変数CIがtrueになるからwarningがerrorになるよ。大体のCIサーバーで自動的にこうなるよ』と言われました。
具体的なエラーは定義済のReactが未使用というものでした(@typescript-eslint/no-unused-vars)

どうしてこうなった

通常、JSX構文で記述された式はReact.createElement()へコンパイルされるため、Reactをインポートする必要がありますが、Emotionを使う場合はちょっと違います。

Emotionのcss Propを使う場合、JSX Pragmaという特別なコメントをソースファイルのトップに記述する必要があります。

JSX_Pragma

/** @jsx jsx */

このコメントによってReact.createElementの代わりにEmotion独自のjsx関数へコンパイルされるようになります。
これでcssという便利なpropが使えるようになり、JSの中でCSSを記述できるようになるわけですが、Reactが使われなくなります。なのでこのままだと@typescript-eslint/no-unused-varsに抵触します。これを何とかするために.eslintrc.jsでrulesを追加します。

module.exports = {
  // 中略
  rules: {
  // 中略
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        varsIgnorePattern: "[Rr]eact",
      },
    ],
    // 中略
  },
  // 中略
};

Emotionを使う場合はやや手間をかけてあげないといけないのですが、今回はこれが原因でエラーが発生したわけです。

解消方法

解消するにあたって↓のIssueを参考に、ビルドのステップを実行する際の環境変数CIをfalseに設定しました。
Stop Treating warnings as errors because process.env.CI = true. #3657

修正したワークフローがこちら

name: Firebase Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
        env:
          CI: false
          REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}
          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}
          REACT_APP_FIREBASE_APP_ID: ${{ secrets.REACT_APP_FIREBASE_APP_ID }}
          REACT_APP_FIREBASE_CONTINUE_URL: ${{ secrets.REACT_APP_FIREBASE_CONTINUE_URL }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

これで無事エラーが解消されました

参考

The css Prop #jsx-pragma