How to fix build failures with `create-react-app` in production

If your build is using create-react-app and has been failing since approximately the 18th of June 2020, this post will help you fix it.

Why your build might be failing

The build script bootstrapped by create-react-app performs some validation of your code. When most of this validation fails, create-react-app prints a warning message. When this happens inside a CI provider, such as Netlify, create-react-app becomes stricter and makes the build fail as well.

Until recently, Netlify was not setting the CI environment variable, which is the de-facto standard for CI providers to let users and libraries know that a build is run inside a CI environment. This not only created a situation of “works differently in Netlify’s build environment than other CI providers”, but also created problems for folks building tools to integrate with our environment around functionality - things like “make sure my tool doesn’t wait for user input and output progress bars that won’t look good in CI”. However, setting this environment variable had the side effect of triggering the “strict mode” of create-react-app mentioned above, which might have made your build start failing, in case you had existing warnings.

How to detect the problem

If your build is impacted by this problem, the following error message should be visible in your build logs.

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

If you don’t see that message, your build is failing for a different reason, and the following fix won’t apply.

How to fix your build

First solution (recommended)

Look into your build logs, and find any warnings printed by your build command. Fixing those warnings will make your build succeed again and is a best practice.

Second solution

Find your build command, which should be set either in the Netlify app or in your netlify.toml.

Prefix your build command with CI=. No space should be between CI and =.

Example build command before the fix:

npm run build

Example build command after the fix:

CI= npm run build

Hopefully one of these solutions will work for you, but if not, please respond to this post with a link to your build logs and as many details as you think are relevant (for instance: “I saw the error in this deploy: (link to deploy logs) , and I tried to fix by adding a netlify.toml which I quote below. I added that file in directory X in my repository.”), and our team will take a closer look for you.

i tried the solutions you posted, but i am still seeing the error

9:49:00 AM: Build ready to start

9:50:18 AM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d

9:50:18 AM: build-image tag: v3.3.20

9:50:18 AM: buildbot version: be8ecf2af866e16fa4301cc5c14de2ccbbb21cf4

9:50:19 AM: Fetching cached dependencies

9:50:19 AM: Starting to download cache of 254.8KB

9:50:19 AM: Finished downloading cache in 59.300018ms

9:50:19 AM: Starting to extract cache

9:50:19 AM: Failed to fetch cache, continuing with build

9:50:19 AM: Starting to prepare the repo for build

9:50:19 AM: No cached dependencies found. Cloning fresh repo

9:50:19 AM: git clone https://github.com/kennymanman/LittleRock

9:50:23 AM: Preparing Git Reference refs/heads/master

9:50:25 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘build’ versus ‘build/’ in the Netlify UI

9:50:25 AM: Starting build script

9:50:25 AM: Installing dependencies

9:50:25 AM: Python version set to 2.7

9:50:27 AM: v12.18.0 is already installed.

9:50:27 AM: Now using node v12.18.0 (npm v6.14.4)

9:50:27 AM: Started restoring cached build plugins

9:50:27 AM: Finished restoring cached build plugins

9:50:27 AM: Attempting ruby version 2.7.1, read from environment

9:50:29 AM: Using ruby version 2.7.1

9:50:29 AM: Using PHP version 5.6

9:50:29 AM: 5.2 is already installed.

9:50:29 AM: Using Swift version 5.2

9:50:29 AM: Started restoring cached node modules

9:50:29 AM: Finished restoring cached node modules

9:50:29 AM: Installing NPM modules using NPM version 6.14.4

9:51:04 AM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js

9:51:04 AM: > node -e “try{require(’./postinstall’)}catch(e){}”

9:51:04 AM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js

9:51:04 AM: > node -e “try{require(’./postinstall’)}catch(e){}”

9:51:05 AM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure

9:51:05 AM: > node -e “try{require(’./postinstall’)}catch(e){}”

9:51:07 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):

9:51:07 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

9:51:07 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):

9:51:07 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

9:51:07 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/jest-haste-map/node_modules/fsevents):

9:51:07 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

9:51:07 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):

9:51:07 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

9:51:07 AM: added 1712 packages from 833 contributors and audited 1720 packages in 36.704s

9:51:08 AM: 67 packages are looking for funding

9:51:08 AM: run npm fund for details

9:51:08 AM: found 4997 low severity vulnerabilities

9:51:08 AM: run npm audit fix to fix them, or npm audit for details

9:51:13 AM: NPM modules installed

9:51:14 AM: Started restoring cached go cache

9:51:14 AM: Finished restoring cached go cache

9:51:14 AM: go version go1.14.4 linux/amd64

9:51:15 AM: go version go1.14.4 linux/amd64

9:51:15 AM: Installing missing commands

9:51:15 AM: Verify run directory

9:51:17 AM: ​

9:51:17 AM: ┌─────────────────────────────┐

9:51:17 AM: │ Netlify Build │

9:51:17 AM: └─────────────────────────────┘

9:51:17 AM: ​

9:51:17 AM: ❯ Version

9:51:17 AM: @netlify/build 3.0.1

9:51:17 AM: ​

9:51:17 AM: ❯ Flags

9:51:17 AM: deployId: 5f25e34bff928d349fcb94b0

9:51:17 AM: mode: buildbot

9:51:17 AM: ​

9:51:17 AM: ❯ Current directory

9:51:17 AM: /opt/build/repo

9:51:17 AM: ​

9:51:17 AM: ❯ Config file

9:51:17 AM: No config file was defined: using default values.

9:51:17 AM: ​

9:51:17 AM: ❯ Context

9:51:17 AM: production

9:51:17 AM: ​

9:51:17 AM: ┌───────────────────────────────────┐

9:51:17 AM: │ 1. Build command from Netlify app │

9:51:17 AM: └───────────────────────────────────┘

9:51:17 AM: ​

9:51:17 AM: $ CI= npm run build

9:51:26 AM: > little-rock@0.1.0 build /opt/build/repo

9:51:26 AM: > react-scripts build

9:51:27 AM: Creating an optimized production build…

9:51:30 AM: Failed to compile.

9:51:30 AM:

9:51:30 AM: ./src/App.js

9:51:30 AM: Cannot find module: ‘react-router-dom’. Make sure this package is installed.

9:51:30 AM: You can install this package by running: npm install react-router-dom.

9:51:30 AM: npm ERR! code ELIFECYCLE

9:51:30 AM: npm ERR! errno 1

9:51:30 AM: npm ERR! little-rock@0.1.0 build: react-scripts build

9:51:30 AM: npm ERR! Exit status 1

9:51:30 AM: npm ERR!

9:51:30 AM: npm ERR! Failed at the little-rock@0.1.0 build script.

9:51:30 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

9:51:35 AM: npm ERR! A complete log of this run can be found in:

9:51:35 AM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-01T21_51_30_960Z-debug.log

9:51:35 AM:

9:51:35 AM: If the build failed with a warning about “process.env.CI = true”, this is due to “create-react-app” treating warnings as errors when in CI. In order to fix this problem, please either:

9:51:35 AM: - Fix the issues highlighted by the warnings above.

9:51:35 AM: - Or modify the “scripts.build” command in your “package.json” from “react-scripts build” to “CI= react-scripts build”

9:51:35 AM: More information can be found at https://docs.netlify.com/configure-builds/troubleshooting-tips/#build-fails-on-warning-message

9:51:35 AM: ​

9:51:35 AM: ┌─────────────────────────────┐

9:51:35 AM: │ “build.command” failed │

9:51:35 AM: └─────────────────────────────┘

9:51:35 AM: ​

9:51:35 AM: Error message

9:51:35 AM: Command failed with exit code 1: CI= npm run build

9:51:35 AM: ​

9:51:35 AM: Error location

9:51:35 AM: In Build command from Netlify app:

9:51:35 AM: CI= npm run build

9:51:35 AM: ​

9:51:35 AM: Resolved config

9:51:35 AM: build:

9:51:35 AM: command: CI= npm run build

9:51:35 AM: commandOrigin: ui

9:51:35 AM: publish: /opt/build/repo/build

Hi @kennymanman,

This is a different problem, unrelated to the CI issue mentioned above.
The build logs show the following:

9:51:30 AM: Cannot find module: ‘react-router-dom’. Make sure this package is installed.
9:51:30 AM: You can install this package by running: npm install react-router-dom.

Installing this dependency with npm install react-router-dom should fix it.