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

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

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

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

```yml
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](https://emotion.sh/docs/introduction)を使う場合はちょっと違います。

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

```jsx:JSX_Pragma
/** @jsx jsx */
```

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

```javascript
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](https://github.com/facebook/create-react-app/issues/3657)

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

```yml
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 }}
```

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

## 参考
[The css Prop #jsx-pragma](https://emotion.sh/docs/css-prop#jsx-pragma)