How to fix Treating warnings as errors because process.env.CI = true in React

ReactBEGINNERMEDIUM

This message appears when Create React App builds fail in CI environments due to ESLint warnings or webpack warnings being treated as errors. This is intentional behavior to ensure code quality, but can be disabled if needed.

What this error means

Create React App (CRA) has a built-in feature that changes its build behavior based on the environment. When the CI environment variable is set to true, CRA's build script automatically treats all warnings (ESLint warnings, webpack warnings, etc.) as errors, causing the build to fail if any warnings are present. This behavior is intentional and designed to enforce stricter code quality standards in continuous integration pipelines. Most CI platforms (GitHub Actions, GitLab CI, CircleCI, Jenkins, Vercel, Netlify) automatically set the CI environment variable to true. The reasoning is that code pushed to production should be warning-free, and this prevents warnings from being ignored or accumulated over time. While this strictness can be helpful for maintaining code quality, it can also cause unexpected build failures when code that builds successfully locally fails in CI because of warnings that were previously ignored. Understanding this behavior is essential for configuring your deployment pipeline correctly.

How to fix "Treating warnings as errors because process.env.CI = true"

1Verify the actual warnings causing the build failure

First, check your CI build logs to identify what warnings are being treated as errors:

bash

# Look for lines like:
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

./src/components/MyComponent.js
  Line 10:10:  'user' is assigned a value but never used  no-unused-vars
  Line 23:8:   'data' is defined but never used  no-unused-vars

Make note of all the warnings. These are the issues you need to fix or suppress. Common warning types include:
- ESLint rule violations (unused vars, missing dependencies)
- Webpack loader warnings
- Dependency deprecation warnings
- Import/export issues

2Fix the underlying warnings (recommended approach)

The best solution is to fix the actual code quality issues causing the warnings:

Fix unused variables:

jsx

// Before (causes warning)
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [unused, setUnused] = useState(null); // Warning: unused variable
  return <div>{count}</div>;
}

// After (fixed)
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Fix missing useEffect dependencies:

jsx

// Before (causes warning)
useEffect(() => {
  fetchData(userId);
}, []); // Warning: userId missing from dependencies

// After (fixed)
useEffect(() => {
  fetchData(userId);
}, [userId]); // Dependencies properly declared

Run npm run build locally with CI=true to catch warnings:

bash

CI=true npm run build

3Disable CI warnings-as-errors by setting CI=false

If you want to deploy despite warnings, set CI environment variable to false in your build command:

Option 1: Modify package.json build script

json

{
  "scripts": {
    "build": "CI=false react-scripts build",
    "build:ci": "react-scripts build"
  }
}

Option 2: Use cross-env for cross-platform compatibility

bash

npm install --save-dev cross-env

Then update package.json:

json

{
  "scripts": {
    "build": "cross-env CI=false react-scripts build"
  }
}

Option 3: Windows-specific approach

json

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

This approach allows the build to succeed with warnings, but you lose the code quality enforcement.

4Set CI=false in your hosting platform environment variables

Configure the environment variable directly in your deployment platform:

Vercel:
1. Go to your project settings
2. Navigate to Environment Variables
3. Add variable: Name = CI, Value = false
4. Apply to Production, Preview, and Development
5. Redeploy your application

Netlify:
1. Go to Site settings > Build & deploy > Environment
2. Click "Edit variables"
3. Add: Key = CI, Value = false
4. Save and trigger a new deploy

GitHub Actions:

yaml

name: Build and Deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      CI: false  # Disable warnings-as-errors
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npm run build

GitLab CI:

yaml

build:
  variables:
    CI: "false"
  script:
    - npm install
    - npm run build

5Suppress specific ESLint warnings with inline comments

For isolated cases where warnings are unavoidable, use ESLint disable comments:

Disable for a single line:

jsx

// eslint-disable-next-line no-unused-vars
const temporaryVariable = calculateValue();

Disable for a block:

jsx

/* eslint-disable no-console */
console.log('Debug info:', data);
console.log('Additional info:', moreData);
/* eslint-enable no-console */

Disable for entire file:

jsx

/* eslint-disable react-hooks/exhaustive-deps */

// Component code with intentionally omitted dependencies
export default function MyComponent() {
  // ...
}

Caution: Only use this for legitimate cases where the warning doesn't apply. Overusing disable comments defeats the purpose of linting.

6Customize ESLint configuration to adjust warning levels

Create or modify .eslintrc.json to change specific rules from warning to off, or downgrade errors:

json

{
  "extends": "react-app",
  "rules": {
    "no-unused-vars": "warn",
    "react-hooks/exhaustive-deps": "warn",
    "no-console": "off"
  }
}

Or use .eslintrc.js for more control:

javascript

module.exports = {
  extends: 'react-app',
  rules: {
    'no-unused-vars': ['warn', { 
      varsIgnorePattern: '^_',
      argsIgnorePattern: '^_' 
    }],
    'react-hooks/exhaustive-deps': 'warn',
    '@typescript-eslint/no-unused-vars': ['warn', {
      argsIgnorePattern: '^_'
    }]
  }
};

Note: Even with rules set to "warn", CI=true will still treat these as errors. This only affects local development unless you also set CI=false.

7Use DISABLE_ESLINT_PLUGIN to completely disable ESLint

As a last resort, you can disable the ESLint plugin entirely in Create React App:

In .env file:

bash

DISABLE_ESLINT_PLUGIN=true

Or in build command:

bash

DISABLE_ESLINT_PLUGIN=true npm run build

Or in package.json:

json

{
  "scripts": {
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
  }
}

Warning: This completely disables ESLint checking during the build, which removes all code quality enforcement. You'll lose:
- Detection of potential bugs
- Code style consistency
- Best practice enforcement
- React Hooks rules validation

Only use this if you're running ESLint separately in your CI pipeline and don't want it in the build process.

8Test your changes locally before pushing to CI

Before committing, test that your build will pass in CI:

bash

# Simulate CI environment locally
CI=true npm run build

# Or with cross-env
npx cross-env CI=true npm run build

This command will fail locally if there are any warnings, just like it would in CI. Fix all warnings until this command succeeds.

You can also add a pre-commit hook to enforce this:

Install husky:

bash

npm install --save-dev husky
npx husky install

Add pre-commit hook:

bash

npx husky add .husky/pre-commit "CI=true npm run build"

This prevents committing code that would fail in CI.

How to fix Treating warnings as errors because process.env.CI = true in React

What this error means

Typical symptoms

Common causes

How to fix "Treating warnings as errors because process.env.CI = true"

Advanced notes

Related errors

Official resources & further reading