Build issue with react-app

Support
, , ,
#1

happy-swartz-33db5c

Facing build issues, This is a react app, I am trying to build from a master branch, that did not work then I tried building from gh-pages branch. This is the error I am facing . Is any one familiar with the same? I had created the app and then I am trying to deploy.
Thank you
6:02:55 PM: Build ready to start
6:02:57 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
6:02:57 PM: build-image tag: v3.4.1
6:02:57 PM: buildbot version: e1f4178b0d9779ebad1b11d5b54739f82fed3c22
6:02:58 PM: Fetching cached dependencies
6:02:58 PM: Failed to fetch cache, continuing with build
6:02:58 PM: Starting to prepare the repo for build
6:02:58 PM: No cached dependencies found. Cloning fresh repo
6:02:58 PM: git clone https://github.com/sahils091/shoppies-intern-web-dev
6:02:59 PM: Preparing Git Reference refs/heads/gh-pages
6:03:00 PM: Starting build script
6:03:00 PM: Installing dependencies
6:03:00 PM: Python version set to 2.7
6:03:01 PM: v12.18.0 is already installed.
6:03:02 PM: Now using node v12.18.0 (npm v6.14.4)
6:03:02 PM: Started restoring cached build plugins
6:03:02 PM: Finished restoring cached build plugins
6:03:02 PM: Attempting ruby version 2.7.1, read from environment
6:03:03 PM: Using ruby version 2.7.1
6:03:03 PM: Using PHP version 5.6
6:03:03 PM: 5.2 is already installed.
6:03:03 PM: Using Swift version 5.2
6:03:03 PM: Started restoring cached go cache
6:03:03 PM: Finished restoring cached go cache
6:03:03 PM: go version go1.14.4 linux/amd64
6:03:03 PM: go version go1.14.4 linux/amd64
6:03:03 PM: Installing missing commands
6:03:03 PM: Verify run directory
6:03:04 PM: ​
6:03:04 PM: ┌─────────────────────────────┐
6:03:04 PM: │ Netlify Build │
6:03:04 PM: └─────────────────────────────┘
6:03:04 PM: ​
6:03:04 PM: ❯ Version
6:03:04 PM: @netlify/build 3.3.5
6:03:04 PM: ​
6:03:04 PM: ❯ Flags
6:03:04 PM: deployId: 5f555c8f9894660661b6e4f4
6:03:04 PM: mode: buildbot
6:03:04 PM: ​
6:03:04 PM: ❯ Current directory
6:03:04 PM: /opt/build/repo
6:03:04 PM: ​
6:03:04 PM: ❯ Config file
6:03:04 PM: No config file was defined: using default values.
6:03:04 PM: ​
6:03:04 PM: ❯ Context
6:03:04 PM: production
6:03:04 PM: ​
6:03:04 PM: ┌───────────────────────────────────┐
6:03:04 PM: │ 1. Build command from Netlify app │
6:03:04 PM: └───────────────────────────────────┘
6:03:04 PM: ​
6:03:04 PM: $ npm run build
6:03:05 PM: npm ERR! code ENOENT
6:03:05 PM: npm ERR! syscall open
6:03:05 PM: npm ERR! path /opt/build/repo/package.json
6:03:05 PM: npm ERR! errno -2
6:03:05 PM: npm ERR! enoent ENOENT: no such file or directory, open ‘/opt/build/repo/package.json’
6:03:05 PM: npm ERR! enoent This is related to npm not being able to find a file.
6:03:05 PM: npm ERR! enoent
6:03:05 PM: npm ERR! A complete log of this run can be found in:
6:03:05 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-09-06T22_03_05_150Z-debug.log
6:03:05 PM: ​
6:03:05 PM: ┌─────────────────────────────┐
6:03:05 PM: │ “build.command” failed │
6:03:05 PM: └─────────────────────────────┘
6:03:05 PM: ​
6:03:05 PM: Error message
6:03:05 PM: Command failed with exit code 254: npm run build
6:03:05 PM: ​
6:03:05 PM: Error location
6:03:05 PM: In Build command from Netlify app:
6:03:05 PM: npm run build
6:03:05 PM: ​
6:03:05 PM: Resolved config
6:03:05 PM: build:
6:03:05 PM: command: npm run build
6:03:05 PM: commandOrigin: ui
6:03:05 PM: Caching artifacts
6:03:05 PM: Started saving build plugins
6:03:05 PM: Finished saving build plugins
6:03:05 PM: Started saving pip cache
6:03:05 PM: Finished saving pip cache
6:03:05 PM: Started saving emacs cask dependencies
6:03:05 PM: Finished saving emacs cask dependencies
6:03:05 PM: Started saving maven dependencies
6:03:05 PM: Finished saving maven dependencies
6:03:05 PM: Started saving boot dependencies
6:03:05 PM: Finished saving boot dependencies
6:03:05 PM: Started saving go dependencies
6:03:05 PM: Finished saving go dependencies
6:03:08 PM: Error running command: Build script returned non-zero exit code: 1
6:03:08 PM: Failing build: Failed to build site
6:03:08 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1
6:03:08 PM: Finished processing build request in 10.230569455s

#2

There’s the important bit!

6:03:05 PM: npm ERR! enoent ENOENT: no such file or directory, open ‘/opt/build/repo/package.json’

You’ll need a package.json file in your repo :smile:.

#3

I did not modify the package.json file, I will double check and try again.
Thank you for responding :slight_smile:

#4

No problem! Make sure that it’s in the correct location (your base directory) too :slight_smile:

#5

So I deleted the above mentioned site. created a new request from my master branch.
had the build and the dir as defaults

I still got a similar error

7:14:07 PM: Build ready to start
7:14:09 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
7:14:09 PM: build-image tag: v3.4.1
7:14:09 PM: buildbot version: e1f4178b0d9779ebad1b11d5b54739f82fed3c22
7:14:09 PM: Fetching cached dependencies
7:14:09 PM: Failed to fetch cache, continuing with build
7:14:09 PM: Starting to prepare the repo for build
7:14:10 PM: No cached dependencies found. Cloning fresh repo
7:14:10 PM: git clone https://github.com/sahils091/shoppies-intern-web-dev
7:14:11 PM: Preparing Git Reference refs/heads/master
7:14:12 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘build’ versus ‘build/’ in the Netlify UI
7:14:12 PM: Starting build script
7:14:12 PM: Installing dependencies
7:14:12 PM: Python version set to 2.7
7:14:14 PM: v12.18.0 is already installed.
7:14:14 PM: Now using node v12.18.0 (npm v6.14.4)
7:14:14 PM: Started restoring cached build plugins
7:14:14 PM: Finished restoring cached build plugins
7:14:15 PM: Attempting ruby version 2.7.1, read from environment
7:14:16 PM: Using ruby version 2.7.1
7:14:17 PM: Using PHP version 5.6
7:14:17 PM: 5.2 is already installed.
7:14:17 PM: Using Swift version 5.2
7:14:17 PM: Started restoring cached node modules
7:14:17 PM: Finished restoring cached node modules
7:14:17 PM: Installing NPM modules using NPM version 6.14.4
7:14:53 PM: > node-sass@4.14.1 install /opt/build/repo/node_modules/node-sass
7:14:53 PM: > node scripts/install.js
7:14:54 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-72_binding.node
7:14:54 PM: Download complete
7:14:54 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
7:14:54 PM: Caching binary to /opt/buildhome/.npm/node-sass/4.14.1/linux-x64-72_binding.node
7:14:54 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
7:14:54 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
7:14:55 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js
7:14:55 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
7:14:55 PM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
7:14:55 PM: > node -e “try{require(’./postinstall’)}catch(e){}”
7:14:55 PM: > node-sass@4.14.1 postinstall /opt/build/repo/node_modules/node-sass
7:14:55 PM: > node scripts/build.js
7:14:56 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
7:14:56 PM: Testing binary
7:14:56 PM: Binary is fine
7:14:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
7:14:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
7:14:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
7:14:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
7:14:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/jest-haste-map/node_modules/fsevents):
7:14:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
7:14:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
7:14:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
7:14:58 PM: added 1712 packages from 808 contributors and audited 1716 packages in 40.56s
7:15:00 PM: 68 packages are looking for funding
7:15:00 PM: run npm fund for details
7:15:00 PM: found 0 vulnerabilities
7:15:00 PM: NPM modules installed
7:15:01 PM: Started restoring cached go cache
7:15:01 PM: Finished restoring cached go cache
7:15:01 PM: go version go1.14.4 linux/amd64
7:15:01 PM: go version go1.14.4 linux/amd64
7:15:01 PM: Installing missing commands
7:15:01 PM: Verify run directory
7:15:02 PM: ​
7:15:02 PM: ┌─────────────────────────────┐
7:15:02 PM: │ Netlify Build │
7:15:02 PM: └─────────────────────────────┘
7:15:02 PM: ​
7:15:02 PM: ❯ Version
7:15:02 PM: @netlify/build 3.3.5
7:15:02 PM: ​
7:15:02 PM: ❯ Flags
7:15:02 PM: deployId: 5f556d3fc1f097499b15871f
7:15:02 PM: mode: buildbot
7:15:02 PM: ​
7:15:02 PM: ❯ Current directory
7:15:02 PM: /opt/build/repo
7:15:02 PM: ​
7:15:02 PM: ❯ Config file
7:15:02 PM: No config file was defined: using default values.
7:15:02 PM: ​
7:15:02 PM: ❯ Context
7:15:02 PM: production
7:15:02 PM: ​
7:15:02 PM: ┌───────────────────────────────────┐
7:15:02 PM: │ 1. Build command from Netlify app │
7:15:02 PM: └───────────────────────────────────┘
7:15:02 PM: ​
7:15:02 PM: $ npm run build
7:15:03 PM: > shoppies-web-dev@0.1.0 build /opt/build/repo
7:15:03 PM: > react-scripts build
7:15:04 PM: Creating an optimized production build…
7:15:10 PM: Failed to compile.
7:15:10 PM:
7:15:10 PM: ./src/Components/HomePage/HomePage.js
7:15:10 PM: Cannot find file ‘./HomePage.scss’ in ‘./src/Components/HomePage’.
7:15:10 PM: npm ERR! code ELIFECYCLE
7:15:10 PM: npm ERR! errno 1
7:15:10 PM: npm ERR! shoppies-web-dev@0.1.0 build: react-scripts build
7:15:10 PM: npm ERR! Exit status 1
7:15:10 PM: npm ERR!
7:15:10 PM: npm ERR! Failed at the shoppies-web-dev@0.1.0 build script.
7:15:10 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
7:15:10 PM: npm ERR! A complete log of this run can be found in:
7:15:10 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-09-06T23_15_10_575Z-debug.log
7:15:10 PM: ​
7:15:10 PM: ┌─────────────────────────────┐
7:15:10 PM: │ “build.command” failed │
7:15:10 PM: └─────────────────────────────┘
7:15:10 PM: ​
7:15:10 PM: Error message
7:15:10 PM: Command failed with exit code 1: npm run build
7:15:10 PM: ​
7:15:10 PM: Error location
7:15:10 PM: In Build command from Netlify app:
7:15:10 PM: npm run build
7:15:10 PM: ​
7:15:10 PM: Resolved config
7:15:10 PM: build:
7:15:10 PM: command: npm run build
7:15:10 PM: commandOrigin: ui
7:15:10 PM: publish: /opt/build/repo/build
7:15:10 PM: Caching artifacts
7:15:10 PM: Started saving node modules
7:15:10 PM: Finished saving node modules
7:15:10 PM: Started saving build plugins
7:15:10 PM: Finished saving build plugins
7:15:10 PM: Started saving pip cache
7:15:10 PM: Finished saving pip cache
7:15:10 PM: Started saving emacs cask dependencies
7:15:10 PM: Finished saving emacs cask dependencies
7:15:10 PM: Started saving maven dependencies
7:15:10 PM: Finished saving maven dependencies
7:15:10 PM: Started saving boot dependencies
7:15:10 PM: Finished saving boot dependencies
7:15:10 PM: Started saving go dependencies
7:15:10 PM: Finished saving go dependencies
7:15:13 PM: Error running command: Build script returned non-zero exit code: 1
7:15:13 PM: Failing build: Failed to build site
7:15:13 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1
7:15:14 PM: Finished processing build request in 1m4.181427735s

image
image1920×1080 271 KB

this is my github structure, package json is in the root

image
image1920×1080 231 KB

this is my package.json

Everything looks right to me, should I make any changes?

#7

You’ll need to make sure that this exists :slight_smile:

#8

image
image1920×1080 224 KB

It does exists in the folder its looking for it

#9

Double-check the capitalisation :stuck_out_tongue:

#10

My apologies for coming back to you so many times,
but I did look the capitalization.
The folder, the js component and the scss file are names exactly the same with “HomePage”, to avoid that.

#11

@Pie
In my attempt to re-jig everything, I deleted the previous site, created a new one. it says its deployed but when I visit it it says page not found.
I had both the default build and directory empty this time.
do you spot errors?

Here is my log.

7:42:44 PM: Build ready to start
7:42:46 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
7:42:46 PM: build-image tag: v3.4.1
7:42:46 PM: buildbot version: e1f4178b0d9779ebad1b11d5b54739f82fed3c22
7:42:46 PM: Fetching cached dependencies
7:42:46 PM: Failed to fetch cache, continuing with build
7:42:46 PM: Starting to prepare the repo for build
7:42:46 PM: No cached dependencies found. Cloning fresh repo
7:42:46 PM: git clone https://github.com/sahils091/shoppies-intern-web-dev
7:42:47 PM: Preparing Git Reference refs/heads/master
7:42:48 PM: No build command found, continuing to publishing
7:42:48 PM: Starting to deploy site from ‘’
7:42:48 PM: Creating deploy tree
7:42:48 PM: Creating deploy upload records
7:42:49 PM: 18 new files to upload
7:42:49 PM: 0 new functions to upload
7:42:49 PM: Starting post processing
7:42:49 PM: Post processing - HTML
7:42:49 PM: Post processing - header rules
7:42:49 PM: Post processing - redirect rules
7:42:49 PM: Finished processing build request in 3.461725967s
7:42:49 PM: Post processing done
7:42:49 PM: Site is live

#12

Hi, @sahils091, I do see content under the /public/ path for this site. I found this based on the following support guide:

You can download the deploy to see the deployed files. If you do so, you will see an index.html file under “public”. Based on this, it sounds like the “publish directory” should be set to “public”.

If there are other questions or concerns, please let us know.

#13

@luke
Thank you for your response, I tried creating another site. with the publish directory set to “public/”. The site was deployed without any errors but when I navigate to the site, nothing shows up, I downloaded the file but there are no javascript files in there.
Since my app is a reactjs app, all my components are in the src folder. while the public folder contains the root index file.
I am not sure how to work around this.
I will also attach a screengrab of my master branch which I am trying to deploy.
Thank you again for your help.

image
image1920×1080 261 KB

This is how the website looks after deployed

image
image1920×1080 151 KB

#14

Hi, @sahils091, using server side javascript isn’t supported at Netlify (with the exception of Functions). Are you generating a pure static version of your site where all javascript is client-side only?

With Create React App (CRA) this is usually done with npm run build (or yarn run build). Are you using that build command?

There is more about why this is required here:

Also, since this site is using client-side routing (as there is no server-side javascript running) the SPA (single-page app) redirect rule mentioned here is also required.

If there are other questions, please let us know.