CircleCI
reactjs
React
create-react-app
CircleCI2.0

create-react-app で作ったものをCircleCI2.0でビルドするときに「Module not found: Error: Can't resolve '@babel/runtime/helpers/assertThisInitialized'」エラーでハマったときの対処法

create-react-app でプロジェクトを作ってCircleCI2.0でビルドしようとしたときに
「Module not found: Error: Can't resolve '@babel/runtime/helpers/assertThisInitialized'」というエラーが出てハマりました…
ローカルではビルドがとおっていたのにCircleCIではそのままだとビルドがとおりませんでした。
備忘録も兼ねてその解決方法を記します。

概要

CircleCIのADD PROJECTSで該当のリポジトリの「Set Up Project」を選択します。
するとOperating SystemとLanguageの選択画面が表示されますので、Nodeを選択します。
すると画面下部にSample.yml File の内容が表示されます。

sample.yml
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:7.10

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      # run tests!
      - run: yarn test

これにcreate-react-appのbuildのコマンドを末尾に追記しました。

      # build
      - run: yarn run build

これをpushしてCircleCIを動かします。
すると以下のエラーが表示されました。

#!/bin/bash -eo pipefail
yarn run build
yarn run v0.24.4
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '@babel/runtime/helpers/assertThisInitialized' in '/home/circleci/repo/node_modules/material-ui/utils'


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Exited with code 1

ローカルにはエラーが出てなかったのになぜ…?

解決方法

以下のコマンドで必要なモジュールをローカルに入れます。

npm install @babel/runtime@latest

するとpackage.jsonにも追加されます。

  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.46",   ←が追加される

package.jsonをpushします。
すると、エラーが解消されてビルドがとおるようになります。

create-react-appでローカルではビルドがとおるのにCircleCIでビルドがとおらずこのようなエラーが出てきた場合、@babel/runtimeを入れてみてください。