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

hey there, which site is this regarding? can we take a look?

yeah, it is a react app. do you want me to send you the repository on github?

i think that seeing the live site you have deployed would be helpful, primarily!

There are issues even after the CI= npm run build.Can anyone help:
----------------------------------------------------------------------------=------------

Deploy Log:
10:01:00 PM: Build ready to start
10:01:02 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
10:01:02 PM: build-image tag: v3.5.0
10:01:02 PM: buildbot version: 172aa31cb336bae73f9eb30159b9f95fe46f2e63
10:01:02 PM: Fetching cached dependencies
10:01:02 PM: Starting to download cache of 122.4MB
10:01:03 PM: Finished downloading cache in 1.423648506s
10:01:03 PM: Starting to extract cache
10:01:09 PM: Finished extracting cache in 5.480054992s
10:01:09 PM: Finished fetching cache in 6.9410409s
10:01:09 PM: Starting to prepare the repo for build
10:01:09 PM: Preparing Git Reference refs/heads/main
10:01:11 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘build’ versus ‘build/’ in the Netlify UI
10:01:11 PM: Starting build script
10:01:11 PM: Installing dependencies
10:01:11 PM: Python version set to 2.7
10:01:11 PM: Started restoring cached node version
10:01:14 PM: Finished restoring cached node version
10:01:14 PM: v12.18.0 is already installed.
10:01:15 PM: Now using node v12.18.0 (npm v6.14.4)
10:01:15 PM: Started restoring cached build plugins
10:01:15 PM: Finished restoring cached build plugins
10:01:15 PM: Attempting ruby version 2.7.1, read from environment
10:01:17 PM: Using ruby version 2.7.1
10:01:17 PM: Using PHP version 5.6
10:01:17 PM: Started restoring cached node modules
10:01:17 PM: Finished restoring cached node modules
10:01:17 PM: Started restoring cached go cache
10:01:17 PM: Finished restoring cached go cache
10:01:18 PM: go version go1.14.4 linux/amd64
10:01:18 PM: go version go1.14.4 linux/amd64
10:01:18 PM: Installing missing commands
10:01:18 PM: Verify run directory
10:01:19 PM: ​
10:01:19 PM: ────────────────────────────────────────────────────────────────
10:01:19 PM: Netlify Build
10:01:19 PM: ────────────────────────────────────────────────────────────────
10:01:19 PM: ​
10:01:19 PM: ❯ Version
10:01:19 PM: @netlify/build 5.3.2
10:01:19 PM: ​
10:01:19 PM: ❯ Flags
10:01:19 PM: deployId: 5fbd35447226f838cbe34d9c
10:01:19 PM: mode: buildbot
10:01:19 PM: ​
10:01:19 PM: ❯ Current directory
10:01:19 PM: /opt/build/repo
10:01:19 PM: ​
10:01:19 PM: ❯ Config file
10:01:19 PM: No config file was defined: using default values.
10:01:19 PM: ​
10:01:19 PM: ❯ Context
10:01:19 PM: production
10:01:19 PM: ​
10:01:19 PM: ────────────────────────────────────────────────────────────────
10:01:19 PM: 1. Build command from Netlify app
10:01:19 PM: ────────────────────────────────────────────────────────────────
10:01:19 PM: ​
10:01:19 PM: $ CI= npm run build
10:01:20 PM: > tutorville@0.1.0 build /opt/build/repo
10:01:20 PM: > react-scripts build
10:01:21 PM: Creating an optimized production build…
10:01:34 PM: Compiled with warnings.
10:01:34 PM:
10:01:34 PM: src/reducer.js
10:01:34 PM: Line 29:32: Expected ‘===’ and instead saw ‘==’ eqeqeq
10:01:34 PM: Line 43:32: Expected ‘===’ and instead saw ‘==’ eqeqeq
10:01:34 PM: src/redux/TaskList.js
10:01:34 PM: Line 13:19: ‘setIsInput’ is assigned a value but never used no-unused-vars
10:01:34 PM: Line 70:26: Expected ‘===’ and instead saw ‘==’ eqeqeq
10:01:34 PM: Line 77:42: Expected ‘===’ and instead saw ‘==’ eqeqeq
10:01:34 PM: src/store.js
10:01:34 PM: Line 2:38: ‘applyMiddleware’ is defined but never used no-unused-vars
10:01:34 PM: src/util/taskId.js
10:01:34 PM: Line 3:1: Unexpected default export of anonymous function import/no-anonymous-default-export
10:01:34 PM: Search for the keywords to learn more about each warning.
10:01:34 PM: To ignore, add // eslint-disable-next-line to the line before.
10:01:34 PM: File sizes after gzip:
10:01:34 PM: 80.27 KB build/static/js/2.59b532d0.chunk.js
10:01:34 PM: 22.49 KB build/static/css/2.1a02f21c.chunk.css
10:01:34 PM: 1.99 KB build/static/js/main.7452051d.chunk.js
10:01:34 PM: 1.39 KB build/static/js/3.f9a4f7d7.chunk.js
10:01:34 PM: 1.17 KB build/static/js/runtime-main.73e2dc2b.js
10:01:34 PM: 577 B build/static/css/main.1aad4dcf.chunk.css
10:01:34 PM: The project was built assuming it is hosted at /tutorville/.
10:01:34 PM: You can control this with the homepage field in your package.json.
10:01:34 PM: The build folder is ready to be deployed.
10:01:34 PM: Find out more about deployment here:
10:01:34 PM: https://cra.link/deployment
10:01:35 PM: ​
10:01:35 PM: (build.command completed in 15.2s)
10:01:35 PM: ​
10:01:35 PM: ────────────────────────────────────────────────────────────────
10:01:35 PM: Netlify Build Complete
10:01:35 PM: ────────────────────────────────────────────────────────────────
10:01:35 PM: ​
10:01:35 PM: (Netlify Build completed in 15.3s)
10:01:35 PM: Caching artifacts
10:01:35 PM: Started saving node modules
10:01:35 PM: Finished saving node modules
10:01:35 PM: Started saving build plugins
10:01:35 PM: Finished saving build plugins
10:01:35 PM: Started saving pip cache
10:01:35 PM: Finished saving pip cache
10:01:35 PM: Started saving emacs cask dependencies
10:01:35 PM: Finished saving emacs cask dependencies
10:01:35 PM: Started saving maven dependencies
10:01:35 PM: Finished saving maven dependencies
10:01:35 PM: Started saving boot dependencies
10:01:35 PM: Finished saving boot dependencies
10:01:35 PM: Started saving go dependencies
10:01:35 PM: Finished saving go dependencies
10:01:35 PM: Build script success
10:01:35 PM: Starting to deploy site from ‘build’
10:01:35 PM: Creating deploy tree
10:01:35 PM: Creating deploy upload records
10:01:35 PM: 0 new files to upload
10:01:35 PM: 0 new functions to upload
10:01:35 PM: Starting post processing
10:01:35 PM: Post processing - HTML
10:01:35 PM: Post processing - header rules
10:01:35 PM: Post processing - redirect rules
10:01:35 PM: Post processing done
10:01:35 PM: Site is live :sparkles:
10:01:55 PM: Finished processing build request in 53.334987111s

Github repo for this code:

Console Log:

2020-11-24 22_03_10-

Seems like you are perhaps running into this situation?

Many of those URL’s have asset fingerprints or hashes in them, and older content already loaded can refer back to files that do not exist in your current deploy.

A post was split to a new topic: Sh: 1: react-scripts: not found Build error 2

This is my deploy log, I have tried many ways to fix this by using your examples nevertheless always been failed to compile all the time. I know there is a message that my Header can’t found in my ‘./components’ in ‘./src’ files but my header is always been there Please, Help me Sir/ Madam

6:11:30 PM: Build ready to start
6:11:32 PM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68
6:11:32 PM: build-image tag: v3.6.1
6:11:32 PM: buildbot version: d35018babe252245044d3565f193fa426818b4b1
6:11:32 PM: Fetching cached dependencies
6:11:32 PM: Failed to fetch cache, continuing with build
6:11:32 PM: Starting to prepare the repo for build
6:11:32 PM: No cached dependencies found. Cloning fresh repo
6:11:32 PM: git clone GitHub - zourdycodes/personal-website
6:11:35 PM: Preparing Git Reference refs/heads/master
6:11:36 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘build’ versus ‘build/’ in the Netlify UI
6:11:37 PM: Starting build script
6:11:37 PM: Installing dependencies
6:11:37 PM: Python version set to 2.7
6:11:38 PM: v12.18.0 is already installed.
6:11:39 PM: Now using node v12.18.0 (npm v6.14.4)
6:11:39 PM: Started restoring cached build plugins
6:11:39 PM: Finished restoring cached build plugins
6:11:39 PM: Attempting ruby version 2.7.1, read from environment
6:11:40 PM: Using ruby version 2.7.1
6:11:41 PM: Using PHP version 5.6
6:11:41 PM: Started restoring cached node modules
6:11:41 PM: Finished restoring cached node modules
6:11:41 PM: Installing NPM modules using NPM version 6.14.4
6:12:15 PM: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I’ll try to do my best with it!
6:12:15 PM: > core-js@2.6.12 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
6:12:15 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
6:12:15 PM: > core-js@3.8.3 postinstall /opt/build/repo/node_modules/core-js
6:12:15 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
6:12:15 PM: > core-js-pure@3.8.3 postinstall /opt/build/repo/node_modules/core-js-pure
6:12:15 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
6:12:15 PM: > ejs@2.7.4 postinstall /opt/build/repo/node_modules/ejs
6:12:15 PM: > node ./postinstall.js
6:12:18 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
6:12:18 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
6:12:18 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
6:12:18 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
6:12:18 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules/fsevents):
6:12:18 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
6:12:18 PM: added 1984 packages from 920 contributors and audited 1990 packages in 36.768s
6:12:20 PM: 125 packages are looking for funding
6:12:20 PM: run npm fund for details
6:12:20 PM: found 0 vulnerabilities
6:12:20 PM: NPM modules installed
6:12:20 PM: Started restoring cached go cache
6:12:20 PM: Finished restoring cached go cache
6:12:20 PM: go version go1.14.4 linux/amd64
6:12:20 PM: go version go1.14.4 linux/amd64
6:12:20 PM: Installing missing commands
6:12:20 PM: Verify run directory
6:12:22 PM: ​
6:12:22 PM: ────────────────────────────────────────────────────────────────
6:12:22 PM: Netlify Build
6:12:22 PM: ────────────────────────────────────────────────────────────────
6:12:22 PM: ​
6:12:22 PM: ❯ Version
6:12:22 PM: @netlify/build 9.0.0
6:12:22 PM: ​
6:12:22 PM: ❯ Flags
6:12:22 PM: deployId: 601d27e20aa75ddb3194cb27
6:12:22 PM: mode: buildbot
6:12:22 PM: ​
6:12:22 PM: ❯ Current directory
6:12:22 PM: /opt/build/repo
6:12:22 PM: ​
6:12:22 PM: ❯ Config file
6:12:22 PM: No config file was defined: using default values.
6:12:22 PM: ​
6:12:22 PM: ❯ Context
6:12:22 PM: production
6:12:22 PM: ​
6:12:22 PM: ────────────────────────────────────────────────────────────────
6:12:22 PM: 1. Build command from Netlify app
6:12:22 PM: ────────────────────────────────────────────────────────────────
6:12:22 PM: ​
6:12:22 PM: $ CI= npm run build
6:12:23 PM: > portfolio-web@0.1.0 build /opt/build/repo
6:12:23 PM: > react-scripts build
6:12:24 PM: Creating an optimized production build…
6:12:28 PM: Failed to compile.
6:12:28 PM:
6:12:28 PM: ./src/App.js
6:12:28 PM: Cannot find file ‘./components/header’ in ‘./src’.
6:12:28 PM: npm ERR! code ELIFECYCLE
6:12:28 PM: npm ERR! errno 1
6:12:28 PM: npm ERR! portfolio-web@0.1.0 build: react-scripts build
6:12:28 PM: npm ERR! Exit status 1
6:12:28 PM: npm ERR!
6:12:28 PM: npm ERR! Failed at the portfolio-web@0.1.0 build script.
6:12:28 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
6:12:28 PM: npm ERR! A complete log of this run can be found in:
6:12:28 PM: npm ERR! /opt/buildhome/.npm/_logs/2021-02-05T11_12_28_722Z-debug.log
6:12:28 PM: ​
6:12:28 PM: ────────────────────────────────────────────────────────────────
6:12:28 PM: “build.command” failed
6:12:28 PM: ────────────────────────────────────────────────────────────────
6:12:28 PM: ​
6:12:28 PM: Error message
6:12:28 PM: Command failed with exit code 1: CI= npm run build
6:12:28 PM: ​
6:12:28 PM: Error location
6:12:28 PM: In Build command from Netlify app:
6:12:28 PM: CI= npm run build
6:12:28 PM: ​
6:12:28 PM: Resolved config
6:12:28 PM: build:
6:12:28 PM: command: CI= npm run build
6:12:28 PM: commandOrigin: ui
6:12:28 PM: publish: /opt/build/repo/build
6:12:28 PM: Caching artifacts
6:12:28 PM: Started saving node modules
6:12:28 PM: Finished saving node modules
6:12:28 PM: Started saving build plugins
6:12:28 PM: Finished saving build plugins
6:12:28 PM: Started saving pip cache
6:12:29 PM: Finished saving pip cache
6:12:29 PM: Started saving emacs cask dependencies
6:12:29 PM: Finished saving emacs cask dependencies
6:12:29 PM: Started saving maven dependencies
6:12:29 PM: Finished saving maven dependencies
6:12:29 PM: Started saving boot dependencies
6:12:29 PM: Finished saving boot dependencies
6:12:29 PM: Started saving rust rustup cache
6:12:29 PM: Finished saving rust rustup cache
6:12:29 PM: Started saving go dependencies
6:12:29 PM: Finished saving go dependencies
6:12:32 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:12:32 PM: Failing build: Failed to build site
6:12:32 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
6:12:32 PM: Finished processing build request in 59.670462729s

so, basically, the file “header” in the subfolder “components” in the folder “src” can’t be found.

You’ll want to check your paths, and evalate whether case is part of the problem:

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

Retrieving list of deployment files…
21:09:18.671 Downloading 63 deployment files…
21:09:19.268 Analyzing source code…
21:09:19.729 Installing build runtime…
21:09:21.795 Build runtime installed: 2066.017ms
21:09:23.506 Looking up build cache…
21:09:23.556 Build cache not found
21:09:24.257 Detected package.json
21:09:24.257 Installing dependencies…
21:09:24.732 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I’ll try to do my best with it!
21:09:52.465 > core-js@2.6.12 postinstall /vercel/workpath0/node_modules/babel-runtime/node_modules/core-js
21:09:52.465 > node -e “try{require(’./postinstall’)}catch(e){}”
21:09:52.566 > core-js@3.9.1 postinstall /vercel/workpath0/node_modules/core-js
21:09:52.566 > node -e “try{require(’./postinstall’)}catch(e){}”
21:09:52.634 > core-js-pure@3.9.1 postinstall /vercel/workpath0/node_modules/core-js-pure
21:09:52.634 > node -e “try{require(’./postinstall’)}catch(e){}”
21:09:52.719 > ejs@2.7.4 postinstall /vercel/workpath0/node_modules/ejs
21:09:52.719 > node ./postinstall.js
21:09:54.562 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
21:09:54.562 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
21:09:54.569 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
21:09:54.569 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
21:09:54.577 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
21:09:54.577 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
21:09:54.584 added 1954 packages from 787 contributors in 29.891s
21:09:55.725 135 packages are looking for funding
21:09:55.725 run npm fund for details
21:09:55.955 Running “npm run build”
21:09:56.162 > spotify-clone@0.1.0 build /vercel/workpath0
21:09:56.162 > react-scripts build
21:09:57.520 Creating an optimized production build…
21:10:19.203 Treating warnings as errors because process.env.CI = true.
21:10:19.203 Most CI servers set it automatically.
21:10:19.203 Failed to compile.
21:10:19.204 src/Footer.js
21:10:19.204 Line 1:28: ‘useState’ is defined but never used no-unused-vars
21:10:19.204 Line 15:12: ‘token’ is assigned a value but never used no-unused-vars
21:10:19.204 Line 31:6: React Hook useEffect has a missing dependency: ‘dispatch’. Either include it or remove the dependency array react-hooks/exhaustive-deps
21:10:19.204 src/Header.js
21:10:19.204 Line 6:10: ‘useEffect’ is defined but never used no-unused-vars
21:10:19.204 Line 9:20: ‘dispatch’ is assigned a value but never used no-unused-vars
21:10:19.204 src/Sidebar.js
21:10:19.204 Line 7:10: ‘getTokenFromResponse’ is defined but never used no-unused-vars
21:10:19.204 Line 11:25: ‘dispatch’ is assigned a value but never used no-unused-vars
21:10:19.204 src/reducer.js
21:10:19.204 Line 1:10: ‘findAllByDisplayValue’ is defined but never used no-unused-vars
21:10:19.235 npm ERR! code ELIFECYCLE
21:10:19.235 npm ERR! errno 1
21:10:19.238 npm ERR! spotify-clone@0.1.0 build: react-scripts build
21:10:19.239 npm ERR! Exit status 1
21:10:19.239 npm ERR!
21:10:19.239 npm ERR! Failed at the spotify-clone@0.1.0 build script.
21:10:19.239 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
21:10:19.253 npm ERR! A complete log of this run can be found in:
21:10:19.253 npm ERR! /vercel/.npm/_logs/2021-03-08T15_40_19_239Z-debug.log
21:10:19.259 Error: Command “npm run build” exited with 1
21:10:21.979 Done with “package.json”

I’ve been trying to find the solution for almost 2 days now :frowning:
Some please help me out.

hi there, this guide will undeniably be helpful!

Thank You… I have solved my problem

1 Like

:fire: Running npm install react-router-dom WORKED FOR ME AS WELL :partying_face: Thank youuuuu

Dear sir,

I’m getting message site deploy failed, even I did CI= run npm build and this error is coming almost for all my react project. Kindly help me out, I will be really gratefull to you.
Github project link:

Netlify link:
https://app.netlify.com/sites/eloquent-lewin-a360d6/deploys/611b4e31505a36af323aa47f

Hi @Satish_M4,

Your log says this:

Cannot find module: 'react-icons/bs'. Make sure this package is installed.

If I go to your package.json: amazonClone/package.json at master · satish-Maurya-4/amazonClone · GitHub, I can see that the dependency doesn’t exist. You need to add the dependency to package.json.

Dear sir,
thanks for the reply,

I.m getting following error in order to add dependency,
as per my opinion it’s a part of react icons package and in design the icon bsSearch is working, may be it can be different issue.
help me out sir

Hi @Satish_M4,

You need to run npm i react-icons.

See here:

https://react-icons.github.io/react-icons

Then you can easily import icons from react-icons/bs.

the obvious problem of your issues → there is a lot of unused vars on your application file structure for sure it’s gonna have an error. your application must be ready means there is no unused vars on your application.

Just in case someone ends up on this thread I had this issue as well.
I want to add that the fist solution offered by @ehmicky worked for me.
I had a warning that one of my useEffects did not have anything in the dependency array. Not a breaking error, just a warning. However, apparently it triggered failure in Netlify build.
I resolved the error, and the build was successful.

1 Like

The truth is, I have looked many times and no, I do not have any dynamic amount, I looked in other forums and they told me that it could be a loose file but neither. I’ve looked file by file and something is going wrong and I can’t figure it out. I need to identify the error but I can’t. Yesterday I was 11h with this, today I’ve been all day. Please, I want to get this problem off my back.

my imports

import React, { useEffect, useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Header from './components/Header/Header'
import Webhooks from './components/Webhooks/Webhooks';
import ServerConfig from './components/ServerConfig/ServerConfig';
import ShopifySites from './components/ShopifySites/ShopifySites';
import Payment from './components/Payment/Payment';
import Login from './components/Login/Login';
import styled, {ThemeProvider} from "styled-components";
import {lightTheme, darkTheme, GlobalStyles} from './themes';
import './App.css'

my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "^5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4",
    "yarn": "^1.22.18"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}