はじめに
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 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 }}
これで無事エラーが解消されました