Home
Support Forums

Why is the react deployment failing? Using "CI= npm run build" doesn't seem to be working

PLEASE help us help you by writing a good post!

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

Is there an issue with my file format on my github repo? Do I have to separate my backend and front files into two different repos? I would hope to keep my react “client” folder where I have already, but nothing I do seems to work. Here a link to my github repo: https://github.com/darienmiller88/Task-Scheduler

This is what my settings look like. When I click “Edit settings”, it auto fills the publish directory with the path client/build/.

Finally, this the error message I’m getting :


11:28:58 PM: Build ready to start
11:29:00 PM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
11:29:00 PM: build-image tag: v4.4.0
11:29:00 PM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
11:29:00 PM: Fetching cached dependencies
11:29:01 PM: Starting to download cache of 25.7MB
11:29:01 PM: Finished downloading cache in 508.732571ms
11:29:01 PM: Starting to extract cache
11:29:01 PM: Finished extracting cache in 470.854086ms
11:29:01 PM: Finished fetching cache in 990.536637ms
11:29:01 PM: Starting to prepare the repo for build
11:29:02 PM: Preparing Git Reference refs/heads/master
11:29:03 PM: Parsing package.json dependencies
11:29:03 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client/build' versus '' in the Netlify UI
11:29:03 PM: Starting build script
11:29:03 PM: Installing dependencies
11:29:03 PM: Python version set to 2.7
11:29:04 PM: Downloading and installing node v16.13.0...
11:29:04 PM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz...
11:29:05 PM: Computing checksum with sha256sum
11:29:05 PM: Checksums matched!
11:29:08 PM: Now using node v16.13.0 (npm v8.1.0)
11:29:08 PM: Started restoring cached build plugins
11:29:08 PM: Finished restoring cached build plugins
11:29:08 PM: Attempting ruby version 2.7.2, read from environment
11:29:09 PM: Using ruby version 2.7.2
11:29:10 PM: Using PHP version 8.0
11:29:10 PM: Started restoring cached go cache
11:29:10 PM: Finished restoring cached go cache
11:29:10 PM: go version go1.16.5 linux/amd64
11:29:10 PM: go version go1.16.5 linux/amd64
11:29:10 PM: Installing missing commands
11:29:10 PM: Verify run directory
11:29:11 PM: ​
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM:   Netlify Build                                                 
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM: ​
11:29:11 PM: ❯ Version
11:29:11 PM:   @netlify/build 18.20.1
11:29:11 PM: ​
11:29:11 PM: ❯ Flags
11:29:11 PM:   baseRelDir: true
11:29:11 PM:   buildId: 6180b07a62fa95401384d52b
11:29:11 PM:   deployId: 6180b07a62fa95401384d52d
11:29:11 PM: ​
11:29:11 PM: ❯ Current directory
11:29:11 PM:   /opt/build/repo/client/build
11:29:11 PM: ​
11:29:11 PM: ❯ Config file
11:29:11 PM:   No config file was defined: using default values.
11:29:11 PM: ​
11:29:11 PM: ❯ Context
11:29:11 PM:   production
11:29:11 PM: ​
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM:   1. Build command from Netlify app                             
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM: ​
11:29:11 PM: $ CI= npm run build
11:29:11 PM: > client@0.1.0 build
11:29:11 PM: > react-scripts build
11:29:11 PM: sh: 1: react-scripts: not found
11:29:11 PM: ​
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM:   "build.command" failed                                        
11:29:11 PM: ────────────────────────────────────────────────────────────────
11:29:11 PM: ​
11:29:11 PM:   Error message
11:29:11 PM:   Command failed with exit code 127: CI= npm run build
11:29:11 PM: ​
11:29:11 PM:   Error location
11:29:11 PM:   In Build command from Netlify app:
11:29:11 PM:   CI= npm run build
11:29:11 PM: ​
11:29:11 PM:   Resolved config
11:29:11 PM:   build:
11:29:11 PM:     base: /opt/build/repo/client/build
11:29:11 PM:     command: CI= npm run build
11:29:11 PM:     commandOrigin: ui
11:29:11 PM:     publish: /opt/build/repo/client/build
11:29:11 PM:     publishOrigin: default
11:29:12 PM: Caching artifacts
11:29:12 PM: Started saving build plugins
11:29:12 PM: Finished saving build plugins
11:29:12 PM: Started saving pip cache
11:29:12 PM: Finished saving pip cache
11:29:12 PM: Started saving emacs cask dependencies
11:29:12 PM: Finished saving emacs cask dependencies
11:29:12 PM: Started saving maven dependencies
11:29:12 PM: Finished saving maven dependencies
11:29:12 PM: Started saving boot dependencies
11:29:12 PM: Finished saving boot dependencies
11:29:12 PM: Started saving rust rustup cache
11:29:12 PM: Finished saving rust rustup cache
11:29:12 PM: Started saving go dependencies
11:29:12 PM: Finished saving go dependencies
11:29:14 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:29:14 PM: Creating deploy upload records
11:29:14 PM: Failing build: Failed to build site
11:29:14 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
11:29:14 PM: Finished processing build request in 14.178010679s

What should I change? If I remove the “build” folder, the error complains that it can’t find an index.html, so I’m all out of ideas at this point.

Checking your repository and your configuration I can see a couple of problems.

#1
Your Base directory looks like it should be set to client not client/build.

Netlify installs the dependencies of the package.json that it finds in the base directory. You’re pointing to a directory that doesn’t contain a package.json and thus react-scripts isn’t being installed.

#2
When you encounter the error:

Could not find a required file.
  Name: index.html
  Searched in: /client/public

This is because there is no index.html file in the client/public folder, and it appears to be a requirement of the Create React App as seen here:

#3
It looks like your Publish directory would need to be set to client/build.

If you’re building this output on your own machine and do not need it to be built on Netlify, then you could set it as the Publish directory and not run a Build command.

2 Likes

Hey Nathan, thanks for responding. It seems like changing my base directory to client/ allowed the deployment to pass thankfully, but the link still doesn’t seem to work as a “Page not found” error message is present. Here is the build log:

1:14:23 AM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/darienmiller88/builds
1:14:50 AM: Build ready to start
1:14:51 AM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
1:14:51 AM: build-image tag: v4.4.0
1:14:51 AM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
1:14:52 AM: Fetching cached dependencies
1:14:52 AM: Starting to download cache of 25.7MB
1:14:52 AM: Finished downloading cache in 686.310794ms
1:14:52 AM: Starting to extract cache
1:14:53 AM: Finished extracting cache in 363.000783ms
1:14:53 AM: Finished fetching cache in 1.055371279s
1:14:53 AM: Starting to prepare the repo for build
1:14:53 AM: Preparing Git Reference refs/heads/master
1:14:54 AM: Parsing package.json dependencies
1:14:54 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'client' versus 'client/' in the Netlify UI
1:14:54 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client' versus '' in the Netlify UI
1:14:54 AM: Starting build script
1:14:55 AM: Installing dependencies
1:14:55 AM: Python version set to 2.7
1:14:55 AM: Downloading and installing node v16.13.0...
1:14:55 AM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz...
1:14:56 AM: Computing checksum with sha256sum
1:14:56 AM: Checksums matched!
1:14:59 AM: Now using node v16.13.0 (npm v8.1.0)
1:14:59 AM: Started restoring cached build plugins
1:14:59 AM: Finished restoring cached build plugins
1:14:59 AM: Attempting ruby version 2.7.2, read from environment
1:15:00 AM: Using ruby version 2.7.2
1:15:01 AM: Using PHP version 8.0
1:15:01 AM: Started restoring cached node modules
1:15:01 AM: Finished restoring cached node modules
1:15:01 AM: Installing NPM modules using NPM version 8.1.0
1:15:11 AM: npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
1:15:11 AM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
1:15:12 AM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
1:15:13 AM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
1:15:14 AM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
1:15:15 AM: npm WARN deprecated sane@1.4.1: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
1:15:18 AM: npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.npm WARN deprecated eslint-loader@1.6.0: This loader has been deprecated. Please use eslint-webpack-plugin
1:15:18 AM: npm WARN deprecated extract-text-webpack-plugin@1.0.1: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
1:15:19 AM: npm WARN deprecated html-webpack-plugin@2.24.0: out of support
1:15:20 AM: npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
1:15:20 AM: npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
1:15:21 AM: npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
1:15:21 AM: npm WARN deprecated babel-eslint@7.1.1: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
1:15:24 AM: npm WARN deprecated @babel/polyfill@7.12.1: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
1:15:24 AM: npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
1:15:24 AM: npm WARN deprecated github@0.2.4: 'github' has been renamed to '@octokit/rest' (https://git.io/vNB11)
1:15:29 AM: npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
1:15:32 AM: added 1202 packages, and audited 1203 packages in 30s
1:15:32 AM: 74 packages are looking for funding
1:15:32 AM:   run `npm fund` for details
1:15:32 AM: 51 vulnerabilities (12 low, 18 moderate, 17 high, 4 critical)
1:15:32 AM: To address issues that do not require attention, run:
1:15:32 AM:   npm audit fix
1:15:32 AM: To address all issues (including breaking changes), run:
1:15:32 AM:   npm audit fix --force
1:15:32 AM: Run `npm audit` for details.
1:15:32 AM: NPM modules installed
1:15:32 AM: Started restoring cached go cache
1:15:32 AM: Finished restoring cached go cache
1:15:32 AM: go version go1.16.5 linux/amd64
1:15:32 AM: go version go1.16.5 linux/amd64
1:15:32 AM: Installing missing commands
1:15:32 AM: Verify run directory
1:15:34 AM: ​
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM:   Netlify Build                                                 
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM: ​
1:15:34 AM: ❯ Version
1:15:34 AM:   @netlify/build 18.20.1
1:15:34 AM: ​
1:15:34 AM: ❯ Flags
1:15:34 AM:   baseRelDir: true
1:15:34 AM:   buildId: 6180c92fab599f5a4c32e071
1:15:34 AM:   deployId: 6180c92fab599f5a4c32e073
1:15:34 AM: ​
1:15:34 AM: ❯ Current directory
1:15:34 AM:   /opt/build/repo/client
1:15:34 AM: ​
1:15:34 AM: ❯ Config file
1:15:34 AM:   No config file was defined: using default values.
1:15:34 AM: ​
1:15:34 AM: ❯ Context
1:15:34 AM:   production
1:15:34 AM: ​
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM:   1. Build command from Netlify app                             
1:15:34 AM: ────────────────────────────────────────────────────────────────
1:15:34 AM: ​
1:15:34 AM: $ CI= npm run build
1:15:34 AM: > client@0.1.0 build
1:15:34 AM: > react-scripts build
1:15:35 AM: Creating an optimized production build...
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
1:15:36 AM: (Use `node --trace-warnings ...` to show where the warning was created)
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
1:15:36 AM: (node:1435) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
1:15:42 AM: Compiled successfully.
1:15:42 AM: File sizes after gzip:
1:15:42 AM:   66.22 KB (+240 B)  build/static/js/main.76049abf.js
1:15:42 AM:   1.16 KB            build/static/css/main.c56eb3cd.css
1:15:42 AM: The project was built assuming it is hosted at the server root.
1:15:42 AM: To override this, specify the homepage in your package.json.
1:15:42 AM: For example, add this to build it for GitHub Pages:
1:15:42 AM:   "homepage": "http://myname.github.io/myapp",
1:15:42 AM: The build folder is ready to be deployed.
1:15:42 AM: You may serve it with a static server:
1:15:42 AM:   npm install -g serve
1:15:42 AM:   serve -s build
1:15:43 AM: ​
1:15:43 AM: (build.command completed in 8.9s)
1:15:43 AM: ​
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM:   2. Deploy site                                                
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM: ​
1:15:43 AM: Starting to deploy site from 'client'
1:15:43 AM: Creating deploy tree 
1:15:43 AM: Creating deploy upload records
1:15:43 AM: 0 new files to upload
1:15:43 AM: 0 new functions to upload
1:15:43 AM: Site deploy was successfully initiated
1:15:43 AM: ​
1:15:43 AM: (Deploy site completed in 389ms)
1:15:43 AM: ​
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM:   Netlify Build Complete                                        
1:15:43 AM: ────────────────────────────────────────────────────────────────
1:15:43 AM: ​
1:15:43 AM: (Netlify Build completed in 9.3s)
1:15:43 AM: Starting post processing
1:15:43 AM: Post processing - HTML
1:15:44 AM: Post processing - header rules
1:15:44 AM: Caching artifacts
1:15:44 AM: Started saving node modules
1:15:44 AM: Finished saving node modules
1:15:44 AM: Post processing - redirect rules
1:15:44 AM: Started saving build plugins
1:15:44 AM: Finished saving build plugins
1:15:44 AM: Started saving pip cache
1:15:44 AM: Finished saving pip cache
1:15:44 AM: Started saving emacs cask dependencies
1:15:44 AM: Post processing done
1:15:44 AM: Finished saving emacs cask dependencies
1:15:44 AM: Started saving maven dependencies
1:15:44 AM: Finished saving maven dependencies
1:15:44 AM: Started saving boot dependencies
1:15:44 AM: Finished saving boot dependencies
1:15:44 AM: Started saving rust rustup cache
1:15:44 AM: Finished saving rust rustup cache
1:15:44 AM: Started saving go dependencies
1:15:44 AM: Finished saving go dependencies
1:15:44 AM: Site is live ✨
1:15:46 AM: Build script success
1:16:13 AM: Finished processing build request in 1m21.901951088s

Here is the link to it: https://lucid-heyrovsky-1133cf.netlify.app/

Do I have to update the build folder? There was an issue of an incorrect react-router-dom version being used that netlify complained about, and upon fixing that, I didn’t re-build the build folder when the deployment was successful.

Did you set the Publish directory to the folder that it is building into?

The Publish directory tells Netlify which folder of files to deploy to the CDN.

In your case I believe you want client/build.

Okay, so I’m making progress now! I added the client/build path to the Publish Directory. I see the / deployed successfully, but attempting to visit the other routes results in a 404 page. How can I over come this? Locally, client side routing works just fine. For reference, my other routes are /set-reminder, /signup, and /signin.

If the other routes were static files built to
client/build/set-reminder.html or client/build/set-reminder/index.html (for example), they would just work.

If you’re using dynamic routes in your Single Page Application (SPA) then you’ll want to add a _redirects (or netlify.toml) redirect rule that tells all of the paths to load the root file.

See:

Or:

This is definitely a single page application, so I added both a _redirects and netlify.toml file to my build folder, but nothing seemed to changed, non / routes still return a 404. They should go in the build folder right?

The _redirects file would go in the client/build folder.

The netlify.toml would go in the client folder.

You don’t need both, but you can have both.

The redirects engine will process the first matching rule it finds, reading from top to bottom. Rules in the _redirects file are always processed first, followed by rules in the Netlify configuration file.

The important thing is not that the files exist though, (which is important), but also that it contains the right rule, which would be…

_redirects would contain:

/*    /index.html   200

If you are building the site, the _redirects file needs to go into the public directory (where the index.html resides.) This is copied to the build directory as part of the build process.

If you are deploying the client/build directory rather than building from the client directory, then yes, you would put the _redirects file in that directory.

1 Like

@colemay is entirely correct, your particular build is taking files from the client/public input folder and copying them to the client/build output folder, (and is erasing anything else in the client/build folder as it does so).

So to get the _redirects file into the client/build folder (which because it is the Publish directory is where Netlify expects it to be), you actually need to put the file into your client/public folder and allow the build process to copy it over.

2 Likes

Alright, so I added the _redirects file to my public folder, rebuilt the build folder, and the link finally works now! Routing works perfectly now. Thank you @coelmay and @nathanmartin for the help, this was very valuable!

3 Likes