Build & deployment issues React app

Hi, I’d like to get some advice on how to deploy my Netlify app

I built a react app using routers, but I’m constantly getting an error message.
These are my settings
image

3:25:42 PM: Build ready to start
3:25:44 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
3:25:44 PM: build-image tag: v3.7.6
3:25:44 PM: buildbot version: 285c807c1a9d7b4bae2488308918aff60187c41c
3:25:44 PM: Building without cache
3:25:44 PM: Starting to prepare the repo for build
3:25:44 PM: No cached dependencies found. Cloning fresh repo
3:25:44 PM: git clone https://github.com/YasBenAll/Lucid
3:25:45 PM: Preparing Git Reference refs/heads/master
3:25:46 PM: Parsing package.json dependencies
3:25:46 PM: Starting build script
3:25:46 PM: Installing dependencies
3:25:46 PM: Python version set to 2.7
3:25:48 PM: v12.18.0 is already installed.
3:25:48 PM: Now using node v12.18.0 (npm v6.14.4)
3:25:48 PM: Started restoring cached build plugins
3:25:48 PM: Finished restoring cached build plugins
3:25:48 PM: Attempting ruby version 2.7.1, read from environment
3:25:49 PM: Using ruby version 2.7.1
3:25:50 PM: Using PHP version 5.6
3:25:50 PM: Started restoring cached yarn cache
3:25:50 PM: Finished restoring cached yarn cache
3:25:50 PM: Installing yarn at version 1.22.4
3:25:50 PM: Installing Yarn!
3:25:50 PM: > Downloading tarball...
3:25:50 PM: [1/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz --> /tmp/yarn.tar.gz.9IC4vcl7MU
3:25:50 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
3:25:50 PM:                                  Dload  Upload   Total   Spent    Left  Speed
3:25:50 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
3:25:50 PM: 100    79  100    79    0     0    383      0 --:--:-- --:--:-- --:--:--   385
3:25:50 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
3:25:50 PM: 100    93  100    93    0     0    169      0 --:--:-- --:--:-- --:--:--   453
3:25:51 PM: 100   625  100   625    0     0    711      0 --:--:-- --:--:-- --:--:--   711
3:25:51 PM: 100 1215k  100 1215k    0     0  1003k      0  0:00:01  0:00:01 --:--:-- 1003k
3:25:51 PM: [2/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz.asc --> /tmp/yarn.tar.gz.9IC4vcl7MU.asc
3:25:51 PM: 100    83  100    83    0     0   1536      0 --:--:-- --:--:-- --:--:--  1536
3:25:51 PM: 100    97  100    97    0     0   1181      0 --:--:-- --:--:-- --:--:--  1181
3:25:51 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
3:25:51 PM: 100   629    0   629    0     0   3402      0 --:--:-- --:--:-- --:--:--  614k
3:25:51 PM: 100  1028  100  1028    0     0   4467      0 --:--:-- --:--:-- --:--:--  4467
3:25:51 PM: > Verifying integrity...
3:25:51 PM: gpg: Signature made Mon 09 Mar 2020 03:52:13 PM UTC using RSA key ID 69475BAA
3:25:51 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
3:25:51 PM: gpg: WARNING: This key is not certified with a trusted signature!
3:25:51 PM: gpg:          There is no indication that the signature belongs to the owner.
3:25:51 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
3:25:51 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
3:25:51 PM: > GPG signature looks good
3:25:51 PM: > Extracting to ~/.yarn...
3:25:51 PM: > Adding to $PATH...
3:25:52 PM: > Successfully installed Yarn 1.22.4! Please open another terminal where the `yarn` command will now be available.
3:25:52 PM: No yarn workspaces detected
3:25:52 PM: Started restoring cached node modules
3:25:52 PM: Finished restoring cached node modules
3:25:52 PM: Installing NPM modules using Yarn version 1.22.4
3:25:53 PM: yarn install v1.22.4
3:25:53 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
3:25:53 PM: [1/4] Resolving packages...
3:25:56 PM: [2/4] Fetching packages...
3:26:29 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
3:26:29 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
3:26:29 PM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
3:26:29 PM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
3:26:29 PM: [3/4] Linking dependencies...
3:26:29 PM: warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
3:26:29 PM: warning " > bootstrap@5.0.1" has unmet peer dependency "@popperjs/core@^2.9.2".
3:26:29 PM: warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
3:26:49 PM: [4/4] Building fresh packages...
3:26:51 PM: success Saved lockfile.
3:26:51 PM: Done in 58.35s.
3:26:51 PM: NPM modules installed using Yarn
3:26:51 PM: Started restoring cached go cache
3:26:51 PM: Finished restoring cached go cache
3:26:51 PM: go version go1.14.4 linux/amd64
3:26:51 PM: go version go1.14.4 linux/amd64
3:26:51 PM: Installing missing commands
3:26:51 PM: Verify run directory
3:26:52 PM: ​
3:26:52 PM: ────────────────────────────────────────────────────────────────
3:26:52 PM:   Netlify Build                                                 
3:26:52 PM: ────────────────────────────────────────────────────────────────
3:26:52 PM: ​
3:26:52 PM: ❯ Version
3:26:52 PM:   @netlify/build 11.32.2
3:26:52 PM: ​
3:26:52 PM: ❯ Flags
3:26:52 PM:   deployId: 60bcccd6c609848540849645
3:26:52 PM: ​
3:26:52 PM: ❯ Current directory
3:26:52 PM:   /opt/build/repo
3:26:52 PM: ​
3:26:52 PM: ❯ Config file
3:26:52 PM:   No config file was defined: using default values.
3:26:52 PM: ​
3:26:52 PM: ❯ Context
3:26:52 PM:   production
3:26:52 PM: ​
3:26:52 PM: ────────────────────────────────────────────────────────────────
3:26:52 PM:   1. Build command from Netlify app                             
3:26:52 PM: ────────────────────────────────────────────────────────────────
3:26:52 PM: ​
3:26:52 PM: $ npm run build
3:26:52 PM: > lucid@0.1.0 build /opt/build/repo
3:26:52 PM: > react-scripts build
3:26:54 PM: Creating an optimized production build...
3:27:31 PM: 
3:27:31 PM: Treating warnings as errors because process.env.CI = true.
3:27:31 PM: Most CI servers set it automatically.
3:27:31 PM: 
3:27:31 PM: Failed to compile.
3:27:31 PM: 
3:27:31 PM: src/App.js
3:27:31 PM:   Line 2:17:   'useState' is defined but never used   no-unused-vars
3:27:31 PM:   Line 2:27:   'useEffect' is defined but never used  no-unused-vars
3:27:31 PM:   Line 15:10:  'auth' is defined but never used       no-unused-vars
3:27:31 PM: src/components/Header.js
3:27:31 PM:   Line 4:26:   'Router' is defined but never used          no-unused-vars
3:27:31 PM:   Line 7:22:   'Redirect' is defined but never used        no-unused-vars
3:27:31 PM:   Line 34:10:  'error' is assigned a value but never used  no-unused-vars
3:27:31 PM:   Line 135:5:  'href' is assigned a value but never used   no-unused-vars
3:27:31 PM: src/components/Login.js
3:27:31 PM:   Line 10:20:  'currentUser' is assigned a value but never used  no-unused-vars
3:27:31 PM: npm ERR! code ELIFECYCLE
3:27:31 PM: npm ERR! errno 1
3:27:31 PM: npm ERR! lucid@0.1.0 build: `react-scripts build`
3:27:31 PM: npm ERR! Exit status 1
3:27:31 PM: npm ERR!
3:27:31 PM: npm ERR! Failed at the lucid@0.1.0 build script.
3:27:31 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
3:27:31 PM: npm ERR! A complete log of this run can be found in:
3:27:31 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-06-06T13_27_31_971Z-debug.log
3:27:31 PM: ​
3:27:31 PM: ────────────────────────────────────────────────────────────────
3:27:31 PM:   "build.command" failed                                        
3:27:31 PM: ────────────────────────────────────────────────────────────────
3:27:31 PM: ​
3:27:31 PM:   Error message
3:27:31 PM:   Command failed with exit code 1: npm run build
3:27:31 PM: ​
3:27:31 PM:   Error location
3:27:31 PM:   In Build command from Netlify app:
3:27:31 PM:   npm run build
3:27:31 PM: ​
3:27:31 PM:   Resolved config
3:27:31 PM:   build:
3:27:31 PM:     command: npm run build
3:27:31 PM:     commandOrigin: ui
3:27:31 PM:     publish: /opt/build/repo/build
3:27:31 PM:   functions:
3:27:31 PM:     '*': {}
3:27:32 PM: Caching artifacts
3:27:32 PM: Started saving node modules
3:27:32 PM: Finished saving node modules
3:27:32 PM: Started saving build plugins
3:27:32 PM: Finished saving build plugins
3:27:32 PM: Started saving yarn cache
3:27:32 PM: Finished saving yarn cache
3:27:32 PM: Started saving pip cache
3:27:32 PM: Finished saving pip cache
3:27:32 PM: Started saving emacs cask dependencies
3:27:32 PM: Finished saving emacs cask dependencies
3:27:32 PM: Started saving maven dependencies
3:27:32 PM: Finished saving maven dependencies
3:27:32 PM: Started saving boot dependencies
3:27:32 PM: Finished saving boot dependencies
3:27:32 PM: Started saving rust rustup cache
3:27:32 PM: Finished saving rust rustup cache
3:27:32 PM: Started saving go dependencies
3:27:32 PM: Finished saving go dependencies
3:27:37 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
3:27:37 PM: Creating deploy upload records
3:27:37 PM: Failing build: Failed to build site
3:27:37 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
3:27:37 PM: Finished processing build request in 1m53.551391482s

I’m really not sure what to do.

You need to set your build command to CI= npm run build.

1 Like

All right, no I’m able to deploy the project, but the page is now a blank screen. It’s not showing my react app. What should I do? Link to the site: https://sleepy-johnson-074a7b.netlify.app/

There’s an error in your code:

image

I added the key as an environment key, but it’s still not showing up.

It says that the API key is invalid, so maybe there’s an error during copy-paste?

I checked on spelling errors but there aren’t any, now I added a local environment variable file to github for the time being, but this isn’t the optimal solution of course

I’m not sure why that’s happening, I’ll revert when I have more info.

However, the API keys are not safe regardless. They’re easily visible in your client-side JS (main.##.js):

If you really want the keys to be secure, maybe you need to use Netlify Functions.