DEV Community

Cover image for 2 ways to overcome deployment problems with React on Netlify
Julia 👩🏻‍💻 GDE
Julia 👩🏻‍💻 GDE

Posted on • Updated on

2 ways to overcome deployment problems with React on Netlify

In the last 6 months, I deployed a bunch of projects on Netlify, mostly React. It was super easy, none of my deployments ever failed. But I struggled a lot getting my last two projects deployed on Netlify, and I didn't know why. The error was

Treating warnings as errors because process.env.CI = true.

Even if I am still not 100% sure why the deployment failed after following the same steps as usual, I found two solutions to handle the failure and finally got my two projects online.


Table Of Contents

  1. How to deploy a project on Netlify
  2. Problems while deploying
    1. Solution 1: Change scripts in package.json
    2. Solution 2: Change key on Netlify

When you are already familiar with how to deploy your site, you can skip the following part.

How to deploy your React projects on Netlify

After creating an account, the profile's overview is shown. Click on the button New site from git which directs you to the deployment page. (There is also the possibility to deploy your site using the command line, which will not be explained in this article).
New site from git
Step1: You can now choose from 3 different git provider: GitHub, GitLab and Bitbucket. After clicking your preferred provider, you will be directed to your repository list.
Choose provider
Step 2: Scroll throw your repositories or use the search bar to choose the repo you'd like to deploy by clicking it. You will now be directed to the settings for your site.
Search bar
Step 3: The owner of this project and the branch is already set. In the basic build settings add npm run build in the Build command field and build in the Publish directory field. When pressing the Deploy site button, Netlify starts to deploy your site. This could take a few minutes.

Step 4: When the last line of Netlify in the Build Complete section will show Finished processing build request in ...m...s, your project is fully and successfully build.
Finished deployment
Step 5: While deploying your project, Netlify chooses a random URL name that can be easily changed to the name you want. To do so, open settings and go to: General - Site details -Site information. Click on the Change site name button, change the name and save it.

Step 6: Now, everything is set up and you can click on the link of your project in the header of Settings for yourname to check out your deployed project.

Problems I faced in two of my projects

Even if I work mostly with React and TailwindCSS, I suddenly failed to deploy two of my projects following the steps above. The error I got was as follows:
Error

After a lot of googling, I found these two solutions which worked for me (I used a different solution on each project):

Solution 1: Change the build part of the script in the package.json file in your project's code:

Solution 1
(Craco was installed to use TailwindCSS, the default would be react-scripts like you can see in the eject part on the bottom)

Solution 2: Make changes in your deployment setting on Netlify directly:

In Netlify open "Site details" - Build & deploy - Environment - Environment variables - edit variables and set Key to CI and value to false.
Change key to CI

Closing words:

This would be it. I hope you find these tips helpful and that it will work out for you. If you found other solutions feel free to post them in the comments below.


Thank you

Thanks for your reading and time. I really appreciate it!

Top comments (9)

Collapse
 
emiarg profile image
Emiliano A.

Hey Julia, what a genius!!!

I couldn't deploy my react project and you gave me the right answer!
Thanks a lot!!

A hug from the other side of the world, Argentina!🤗

Emiliano Agu

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Glad it helped, Emiliano.

Collapse
 
maxv1z profile image
Maxviz

Logined here to thank you!!! You've helped a lot!

Collapse
 
rabtensamphel profile image
Rabten Samphel

Thanks that helped.

Collapse
 
alamin__khan profile image
Md. Al-Amin Khan

It's work..!
Thanks :)

Collapse
 
mayankkalbhor profile image
Mayank K

Amazing Thanks. resolved my issue

Collapse
 
nibble profile image
Joseph Mawa

Hi JU!

Thanks for the article. I am sure someone just starting out with netlify will find it useful. I also faced the same problem some time back. Actually the reason is clearly stated in the error message but it just went over my head. It is because netlify treats any warnings emitted by react as errors therefore failing the build process. I remember ignoring the warnings by adding CI='' just before the build command. I am not sure if that is still the recommended way.

CI='' npm run build
Enter fullscreen mode Exit fullscreen mode

I noticed the following typo in the article.

In the last 6 months, I deployed a punch of projects on Netlify, mostly React.

Probably you meant a bunch of projects

And looks like you entered the build command in the base directory field in the screenshot.
screenshot

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you so much for your comment, that helps a lot!

Collapse
 
novemberxxi profile image
Edmond Setati

please help as i have tried solving this issue but it always fails.

10:46:56 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (ntl.fyi/exit-code-2)
10:46:54 AM: Netlify Build

10:46:54 AM: ────────────────────────────────────────────────────────────────
10:46:54 AM: ​
10:46:54 AM: ❯ Version
10:46:54 AM: @netlify/build 29.12.1
10:46:54 AM: ​
10:46:54 AM: ❯ Flags
10:46:54 AM: baseRelDir: true
10:46:54 AM: buildId: 649bf364617c61519231de5a
10:46:54 AM: deployId: 649bf364617c61519231de5c
10:46:54 AM: tracing:
10:46:54 AM: enabled: 'false'
10:46:54 AM: host: 10.65.14.1
10:46:54 AM: parentSpanId: ecf44dda7173c91b
10:46:54 AM: traceFlags: '01'
10:46:54 AM: traceId: 90756c7a156effc636e2dedf005b417a
10:46:54 AM: ​
10:46:54 AM: ❯ Current directory
10:46:54 AM: /opt/build/repo
10:46:54 AM: ​
10:46:54 AM: ❯ Config file
10:46:54 AM: No config file was defined: using default values.
10:46:54 AM: ​
10:46:54 AM: ❯ Context
10:46:54 AM: production
10:46:54 AM: ​
10:46:54 AM: Build command from Netlify app

10:46:54 AM: ────────────────────────────────────────────────────────────────
10:46:54 AM: ​
10:46:54 AM: $ Build command
10:46:54 AM: bash: Build: command not found
10:46:54 AM: ​
10:46:54 AM: build.command failed

10:46:54 AM: ────────────────────────────────────────────────────────────────
10:46:54 AM: ​
10:46:54 AM: Error message
10:46:54 AM: Command failed with exit code 127: Build command (ntl.fyi/exit-code-127)
10:46:54 AM: ​
10:46:54 AM: Error location
10:46:54 AM: In Build command from Netlify app:
10:46:54 AM: Build command
10:46:54 AM: ​
10:46:54 AM: Resolved config
10:46:54 AM: build:
10:46:54 AM: command: Build command
10:46:54 AM: commandOrigin: ui
10:46:54 AM: publish: /opt/build/repo/Publish directory
10:46:54 AM: publishOrigin: ui
10:46:56 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:46:56 AM: Failing build: Failed to build site
10:46:56 AM: Finished processing build request in 25.832s