Treating warnings as errors because process.env.CI = true. Failed to compile

Question

I am working on a react-weather application for self learning purpose. Deployed the same in gh-pages.
URL
https://davisraimon.github.io/react-weather/
Repo
https://github.com/davisraimon/react-weather

When tried to integrate my application with Travis Ci, i got error as follows. It says like i have to change some env variable called Process.env.CI.

$ git clone --depth=50 --branch=master https://github.com/davisraimon/react-weather.git davisraimon/react-weather
nvm.install
4.18s$ nvm install stable
cache.1
Setting up build cache
cache.npm
$ node --version
v14.4.0
$ npm --version
6.14.5
$ nvm --version
0.35.3
install.npm
13.21s$ npm ci 
7.45s$ npm run build
> [email protected] build /home/travis/build/davisraimon/react-weather
> react-scripts build
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
./src/components/form.component.js
  Line 1:17:  'Component' is defined but never used  no-unused-vars
./src/App.js
  Line 2:8:    'logo' is defined but never used              no-unused-vars
  Line 8:7:    'API_key' is assigned a value but never used  no-unused-vars
  Line 37:5:   Expected a default case                       default-case
  Line 53:14:  Expected '===' and instead saw '=='           eqeqeq
  Line 69:20:  Expected '===' and instead saw '=='           eqeqeq
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
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.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2020-06-30T17_45_07_887Z-debug.log
The command "npm run build" exited with 1.
cache.2
store build cache

I added env variable in .travis.yml file.

env:
    process.env.CI : false

Still its showing the same error.

Can anyone help me out of this situation please...

Stradivari

Yes....When i do that it will work perfectly. Thanks – Stradivari

For future readers process.env is the node variable that contains all environment variables. In the .travis.yml file, you should just use the variable name, in this case CI, without the process.env. – Kreager

Answer 1

  "scripts": {
    "start": "react-scripts start",
    "build": "CI=false && react-scripts build",  // Add CI=False here
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Keenan

Didnt work, pipeline complaining > CI=false && react-scripts build 'CI' is not recognized as an internal or external command, operable program or batch file. – Slipway

@Slipway was this on windows? – Keenan

Answer 2

For me the solution was:

env: 
  CI: false

Hostetter

Where to add this line? – Hereafter

Answer 3

if you have to continue with the build and deploy from within GitLab CICD pipelines, you can include CI=false like so:

CI=false npm run build

or

unset CI
npm run build

Here is a complete gitlab_ci job sample:

build-dev:
  environment: DEV
  image: node:16
  stage: build
  script:
    - npm install
    - CI=false npm run build
  only:
    - /^devrelease-.*$/
  tags:
    - docker

or

build-dev:
  environment: DEV
  image: node:16
  stage: build
  script:
    - unset CI
    - npm install
    - npm run build
  only:
    - /^devrelease-.*$/
  tags:
    - docker
  

Zorina

Answer 4

In my specific case, I was using Netlify, so all I did was set the ENV vars inside Netlify's panel:

• Select Site Settings Tab
• Select Build and Deploy
• Scroll down to Environment variables and press Edit Variables
• Fill it in with Key = CI and Value = false
• Press save and trigger a new deploy

Alviani

Answer 5

For me replacing npm run build with CI='' npm run build worked.

Halfwitted

Answer 6

Using Azure Static web pages via GitHub repo. Adding this worked like a charm:

env:
  CI: false

Just a quick note. This was applied to the yaml defining the CI process in GitHub actions. The env element has no indentation (at the same level as the name:)

Note: Given all is set the same way on your side, it should be located in your GitHub repo under the tab Actions -> Azure Static Web Apps CI/CD -> The link to the yaml is right under the title (Azure Static Web Apps CI/CD )

Azure static web-apps yaml:

Resource: https://github.com/Azure/static-web-apps/issues/179

Nautch

Could you pleas be more specific? Where in the yml file? – Boiardo

Given all is set the same way at your side it should be located in your github repo under tab Actions -> Azure Static Web Apps CI/CD -> the link to the yaml is right under the title (Azure Static Web Apps CI/CD ) – Nautch

Answer 7

Follow the steps below and your problem would be solved:

• Select Site Settings Tab
• Select Build and Deploy
• Scroll down to Environment variables choose Edit Variables
• Fill it in with Key = CI and Value = false
• Press clear cache and redeploy

...and have fun.

Nightfall

Answer 8

This happens due to your CI server setting (in my case it is netlify).. Follow the steps below and your problem would be solved:

Select--> Site Settings Tab

Select--> Build and Deploy

Scroll down to Environment variables choose Edit Variables

Fill it in with Key = CI and Value = false

Press clear cache and redeploy

Tymes

Thank you for this -- after bashing awhile in this situation w/ Netlify, I caught on that the warnings were failing the build completely, then finally studied the output a bit more closely and saw mention of the flag...which the error output was a bit more robust. Thanks so much for helping unblock me ;P – Toothy

Answer 9

Coming from hours of googling, for me the following worked for Azure Devops:

In your package.json

"scripts": {
  ...
  "build": "set \"CI=false\" && react-scripts build"
}

Note: The escaped quotes are important!

Personality

Answer 10

In case you want to deploy to a windows server or using powershell, you can set the environment variables like this:

script:
  - $env:CI="false"
  - npm run build

or:

$env:CI="false"; npm run build

Southing

Answer 11

CI=true is needed in case you would like to process test during the deployment but it can be easily archived by setting a flag via package.json (in case in your dockerfile already set ENV CI=true you can remove it)

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "CI=true react-scripts test"
  }

Ophidian

Answer 12

In Gitlab CI job in yml file, adding below script in my job worked for me.

script:
- CI=false yarn run build

Landgrabber

Answer 13

you must fix the warnings you have in react, that's why it doesn't let you deploy

Linson

Answer 14

I'm using gitlab ci & yarn and this worked for me:

  script: 
    - CI=false yarn build

Rebekahrebekkah

Answer 15

For me, I was deploying a ReactJs project and I faced the CI error. I added an environment variable to Netlify. Variable name added was: CI and it's value was given as: false

Netlify then ignored the errors and performed the build.

Netlify add environment variable option:

Brookebrooker

Answer 16

jobs:
  build:
    name: Build ⛏️
    runs-on: ubuntu-latest
    steps: 
      - name: Checkout Repository
        uses: actions/checkout@main
      - name: Install dependencies
        run: npm ci --legacy-peer-deps
      - name: Build dependencies
        run: npm run build
        env: 
          CI: false  // Here I added CI = false and it worked for me

Add CI: false in the workflow file of github actions (main.yml probably)

Ozenfant