I used the React Tailwind template to build a site. It runs in my browser perfectly. npm start results in no issues. But when I try to deploy to Netlify or Heroku, I get an error. I have followed the documentation closely and tried many different tutorials to no avail.
When I run npm run build, I get an error locally.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build && gulp licenses`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I went into the package.json & removed part of the script.
I changed this
"build": "react-scripts build && gulp licenses"
To this:
"build": "react-scripts build"
Just to test it out. It got rid of the error locally, but not when I try to deploy. Here is the error from Netlify which has not changed with either of these scripts.
I've also tried npm run build from my linux machine as well and got the same result.
'''
2:50:45 PM: Build ready to start
2:50:47 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
2:50:47 PM: build-image tag: v3.4.1
2:50:47 PM: buildbot version: c6376102eedf4be6c6e5d685c7141e2eb612d47d
2:50:47 PM: Fetching cached dependencies
2:50:47 PM: Failed to fetch cache, continuing with build
2:50:47 PM: Starting to prepare the repo for build
2:50:48 PM: No cached dependencies found. Cloning fresh repo
2:50:48 PM: git clone https://github.com/MichaelMacaulay/testing
2:50:49 PM: Preparing Git Reference refs/heads/main
2:50:51 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
2:50:51 PM: Starting build script
2:50:51 PM: Installing dependencies
2:50:51 PM: Python version set to 2.7
2:50:52 PM: v12.18.0 is already installed.
2:50:53 PM: Now using node v12.18.0 (npm v6.14.4)
2:50:53 PM: Started restoring cached build plugins
2:50:53 PM: Finished restoring cached build plugins
2:50:53 PM: Attempting ruby version 2.7.1, read from environment
2:50:55 PM: Using ruby version 2.7.1
2:50:55 PM: Using PHP version 5.6
2:50:55 PM: 5.2 is already installed.
2:50:55 PM: Using Swift version 5.2
2:50:55 PM: Started restoring cached node modules
2:50:55 PM: Finished restoring cached node modules
2:50:56 PM: Installing NPM modules using NPM version 6.14.4
2:51:35 PM: > [email protected] postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
2:51:35 PM: > node -e "try{require('./postinstall')}catch(e){}"
2:51:35 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
2:51:35 PM: > node -e "try{require('./postinstall')}catch(e){}"
2:51:38 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
2:51:38 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2:51:38 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
2:51:38 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2:51:38 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/jest-haste-map/node_modules/fsevents):
2:51:38 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2:51:38 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
2:51:38 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2:51:38 PM: added 1745 packages from 778 contributors and audited 1752 packages in 41.328s
2:51:40 PM: 57 packages are looking for funding
2:51:40 PM: run `npm fund` for details
2:51:40 PM: found 5 vulnerabilities (1 low, 2 moderate, 2 high)
2:51:40 PM: run `npm audit fix` to fix them, or `npm audit` for details
2:51:40 PM: NPM modules installed
2:51:40 PM: Started restoring cached go cache
2:51:40 PM: Finished restoring cached go cache
2:51:40 PM: go version go1.14.4 linux/amd64
2:51:40 PM: go version go1.14.4 linux/amd64
2:51:40 PM: Installing missing commands
2:51:40 PM: Verify run directory
2:51:42 PM:
2:51:42 PM: ┌─────────────────────────────┐
2:51:42 PM: │ Netlify Build │
2:51:42 PM: └─────────────────────────────┘
2:51:42 PM:
2:51:42 PM: ❯ Version
2:51:42 PM: @netlify/build 4.8.1
2:51:42 PM:
2:51:42 PM: ❯ Flags
2:51:42 PM: deployId: 5f7e0e056fc9cb00899b6282
2:51:42 PM: mode: buildbot
2:51:42 PM:
2:51:42 PM: ❯ Current directory
2:51:42 PM: /opt/build/repo
2:51:42 PM:
2:51:42 PM: ❯ Config file
2:51:42 PM: No config file was defined: using default values.
2:51:42 PM:
2:51:42 PM: ❯ Context
2:51:42 PM: production
2:51:42 PM:
2:51:42 PM: ┌───────────────────────────────────┐
2:51:42 PM: │ 1. Build command from Netlify app │
2:51:42 PM: └───────────────────────────────────┘
2:51:42 PM:
2:51:42 PM: $ npm run build
2:51:42 PM: > [email protected] build /opt/build/repo
2:51:42 PM: > react-scripts build && gulp licenses
2:51:44 PM: Creating an optimized production build...
2:51:57 PM:
2:51:57 PM: Treating warnings as errors because process.env.CI = true.
2:51:57 PM: Most CI servers set it automatically.
2:51:57 PM:
2:51:57 PM: Failed to compile.
2:51:57 PM:
2:51:57 PM: ./src/components/Navbar.js
2:51:57 PM: Line 17:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: ./src/components/Footer.js
2:51:57 PM: Line 73:23: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: Line 78:23: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: Line 83:23: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: Line 88:23: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: Line 103:17: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
2:51:57 PM: npm ERR! code ELIFECYCLE
2:51:57 PM: npm ERR! errno 1
2:51:57 PM: npm ERR! [email protected] build: `react-scripts build && gulp licenses`
2:51:57 PM: npm ERR! Exit status 1
2:51:57 PM: npm ERR!
2:51:57 PM: npm ERR! Failed at the [email protected] build script.
2:51:57 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2:51:57 PM: npm ERR! A complete log of this run can be found in:
2:51:57 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-10-07T18_51_57_432Z-debug.log
2:51:57 PM:
2:51:57 PM: ┌─────────────────────────────┐
2:51:57 PM: │ "build.command" failed │
2:51:57 PM: └─────────────────────────────┘
2:51:57 PM:
2:51:57 PM: Error message
2:51:57 PM: Command failed with exit code 1: npm run build
2:51:57 PM:
2:51:57 PM: Error location
2:51:57 PM: In Build command from Netlify app:
2:51:57 PM: npm run build
2:51:57 PM:
2:51:57 PM: Resolved config
2:51:57 PM: build:
2:51:57 PM: command: npm run build
2:51:57 PM: commandOrigin: ui
2:51:57 PM: publish: /opt/build/repo/build
2:51:57 PM: Caching artifacts
2:51:57 PM: Started saving node modules
2:51:57 PM: Finished saving node modules
2:51:57 PM: Started saving build plugins
2:51:57 PM: Finished saving build plugins
2:51:57 PM: Started saving pip cache
2:51:57 PM: Finished saving pip cache
2:51:57 PM: Started saving emacs cask dependencies
2:51:57 PM: Finished saving emacs cask dependencies
2:51:57 PM: Started saving maven dependencies
2:51:57 PM: Finished saving maven dependencies
2:51:57 PM: Started saving boot dependencies
2:51:57 PM: Finished saving boot dependencies
2:51:57 PM: Started saving go dependencies
2:51:57 PM: Finished saving go dependencies
2:52:00 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
2:52:00 PM: Failing build: Failed to build site
2:52:00 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
2:52:00 PM: Finished processing build request in 1m13.332194271s
Here is the link to the current Github repo. Any help is seriously appreciated. Been struggling with these for days now.
The reason it works locally, but not while deploying on Netlify is written here :D
You have some warnings (yellow underline in VSCode) which are being treated as errors (red underline) - and errors prevent the build process.
Locally, you do not have this environment variable (
CIset to true)To fix this, either fix all the warnings in your code or add this to your Netlify build command:
Here is the Netlify article