8

I am using Azure static Web Apps to host my React website.

And I keep facing the error below.

yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

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

Most CI servers set it automatically.

Failed to compile.

I have tried npx browserslist@latest --update-db for several times but it keep send run failed message to me.

and here is the entire error image

chelsey lee
  • 176
  • 1
  • 1
  • 12
  • I dont think it is an issue with azure static web app https://github.com/facebook/create-react-app/issues/6708 – Sajeetharan Jun 06 '21 at 07:52
  • @Sajeetharan Hi thanks for the reply ! Just figure this out through the post ( https://github.com/postcss/autoprefixer/issues/1184 ) `npm i npm-update-all -g` fixed this. – chelsey lee Jun 06 '21 at 08:02
  • Don’t add solved to the title. If your found a solution yourself write an answer and accept it. – t.niese Jun 06 '21 at 08:07
  • @t.niese Thank you ! First time posting questions, still need to learn a lot ... By the way, I got `you can accept your own answers in 2 days`. Is that normal ? – chelsey lee Jun 06 '21 at 08:14
  • @t.niese - Curious to know more about your comment regarding not to add "solved" to the title. Appreciate if you can explain. Thanks. – Gaurav Mantri Jun 06 '21 at 08:17
  • 1
    @GauravMantri Perhaps this will effect the searching results, cause I just found out that problem with correct answer selected will make the answers box turn into full green instead of only green outlined. – chelsey lee Jun 06 '21 at 08:36
  • 2
    @GauravMantri because there is the feature to accept an answer, so “solved” is unnecessary and just adds noise. Especially if everyone writes it in a different way. And I often search for questions with no accepted answered to check if I can answers them. – t.niese Jun 06 '21 at 08:53
  • @t.niese much thanks for the explanation ! – chelsey lee Jun 07 '21 at 10:38

3 Answers3

4

for all who are facing this problem , checkout this post Browserslist: caniuse-lite is outdated #1184

using npm i npm-update-all -g to update all outdated files can solve this issue

chelsey lee
  • 176
  • 1
  • 1
  • 12
  • 1
    Yes. Also want to point out that this problem would appear on all CI/CD platforms, not just Azure Static Web Apps, because warnings are treated as errors in those environments. Locally, this warning still appears but doesn’t break the build. – Anthony Chu Jun 06 '21 at 16:25
  • @AnthonyChu thank you for the remind ! it does help a lot – chelsey lee Jun 08 '21 at 13:29
  • 2
    `yarn upgrade` if using yarn. – theberzi Sep 17 '22 at 13:47
0

I have same problem in my Vue App.And in my case,yarn upgrade helps a lot.

arika163
  • 17
  • 2
  • 2
    This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/30169043) – Beso Oct 25 '21 at 10:43
0

In my case cleaning node_modules folder and reinstalling the packages helped:

# From the root of the repo
rm -rf node_modules
npx browserslist@latest --update-db

If you have multiple package.json files in the repository, check out how to clean all node_modules recursively

Bruno Peres
  • 2,980
  • 1
  • 21
  • 19