create-react-app: Browserslist error

There isn’t a solution, but if you want to continue developing, remove development browserlist items in package.json works for me

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

hate to be “that guy”, but commenting "Same issue" isn’t really productive, and just pollutes the issue for whoever’s looking at it. please reconsider

@timurmamedov nobody did a breaking change. We had an error in postcss-preset-env browsers generation. By accident this error didn’t showed before. New Can I Use update just contained new data. Unfortunately with this new data that old issues generated wrong browsers list (with never existed android all). The browsers list is still broken because of this issue. We should fix this issue somewhere in postcss-preset-env.

Latest Browserslist is just a dirty fix. We just ignore broken android all browser. But it means that Autoprefixer will miss correct prefixes for Android. To mark that browsers list is still incorrect we print warning.

We need to wait when @jonathantneal will fix the problem. If you want to make it faster, send him some love. CSS and JS communities everyday use his work and we own him a lot of love and support.

The problem is solved in new react apps at this moment

temporary solution:

// package.json

  "resolutions": {
    "browserslist": "4.6.2",
    "caniuse-lite": "1.0.30000974"
  },

maybe you can use umijs, it is not affected.

We made a dirty fix in Browserslist 4.6.3 to fix the problem:

https://twitter.com/Browserslist/status/1140911400304467968

pin "caniuse-lite": "1.0.30000974" in your package.json

they released a new version 2 hours ago: https://www.npmjs.com/package/caniuse-lite

Same Issue here

Windows 10 Version 1809 (Build 17763.557)
node v11.10.0
npm 6.7.0

Following Solution worked 🚀

• Add caniuse-lite to your package.json
• npm i

"dependencies": {
    "react": "^16.8.6",
    ...
    "caniuse-lite": "1.0.30000974"
  }

maybe resolutions better for the temp quick fix

 "resolutions": {
    "caniuse-lite": "1.0.30000974"
  }

@liSong5713 Temporary solution:

npm i browserslist@4.6.2
npm i caniuse-lite@1.0.30000974

temporary solution

package.json "browserslist": [],

This works!

temporary solution

package.json "browserslist": [],

I think the issue is now fixed:

npm cache clean --force
rm -rf node_modules 
rm package-lock.json && npm install

or

yarn cache clean
rm -rf node_modules
rm yarn.lock && yarn

would do.

It looks like caniuse or caniuse-lite may have published a potentially breaking change that rolled into postcss-preset-env, which then rolled into browserslist and threw this error or warning.

How it worked: More or less, caniuse stats are provided as an object of features, like { "css-all": {}, "css-any-link": {} }. Within each feature, stats are provided as an object of browsers, like { "android": {}, "edge": {} }. Within each browser, stats are provided as an object of versions or version ranges, like { 4.1": "n", "4.2-4.3": "n" }.

For example, one tree of features might look like { "css-all": { "android": { "4.1": "n", "4.2-4.3": "n" } } }.

What changed: Within the android browser object of versions, stats now provide a simplified "all" value.

This means one tree of features might look like { "css-all": { "android": { "all": "n" } } }.

That is how the android all query ends up getting generated, which browserslist does not support.

hello, after the fix my react project run but while compiling I got this:

the solution will be to not use 30000975 caniuse-lite version and simply keep an older package-lock.json to restrict it to 973 or 974.

it seems like caniuse-lite has unpublished the bad version. rm -rf node_modules and reinstall deps

nope

temporary solution package.json "browserslist": [],

npm ERR! JSON.parse Failed to parse json

does not work for me hmm

Delete comma 😉

pin "caniuse-lite": "1.0.30000974" in your package.json

they released a new version 2 hours ago: https://www.npmjs.com/package/caniuse-lite

  "dependencies": {
    "react": "^16.8.6",

     ...

    "caniuse-lite": "1.0.30000974"
  },

temporary solution, but its work

There isn’t a solution, but if you want to continue developing, remove development browserlist items in package.json works for me

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

@NaNdaWteK It worked for me.

@timurmamedov, yes, the all version appears to be removed in caniuse-db@1.0.30000976, which has been merged into caniuse-lite@1.0.30000976.

I used this rudimentary test to compare v1.0.30000975 and v1.0.30000976:

// present in 1.0.30000975, removed in 1.0.30000976
caniuse.feature(caniuse.features['prefers-color-scheme']).stats.android.all

Looking at the most recent commits to caniuse-lite, it appears this change was most likely made within caniuse-db, and not patched in caniuse-lite. This is great news for all projects affected by the all change to caniuse-db, including PostCSS Preset Env. 🎉

@etisdew, if I managed caniuse, which merely exports a collection of function-less JSON files, I might not be prepared to test for every way other projects have chosen to use my files. If you think more tests are needed, you must produce a sufficient JSON schema and submit the PR to caniuse-db — I believe that is the contract cost of complaining about open source. 😉

I did

npm cache clean --force
rm -rf node_modules 
rm package-lock.json && npm install

and yet the problem remains 😦

Do not change browserslist: []. It will remove all prefixes and polyfills.

Just update Browserslist. It has dirty fix.

temporary solution package.json "browserslist": [],

This works!

Thankyou. worked.

This worked perfectly! Thank you so much

Hi I just removed

"last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"

from browsersList development and it worked, Somebody know the source of this problem?

There isn’t a solution, but if you want to continue developing, remove development browserlist items in package.json works for me

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

Firefox seems to be the faulty one. It will still start when leaving chrome and safari there

When a hacker breaks all the development community in the world hahaha

Same issue node: 10.12.19 npm: 5.6.0

why?

@etisdew we already discussing solution in postcss-preset-env repo. This repo is a wrong place for issue and discussing.

@ai @jonathantneal builds seem to be succeeding now, since the latest update to caniuse-lite from 5 hours ago. Thank you.

I see, thanks for clarification Andrey. I’ll see if we can have a look as well

I tried…

1. npm cache clean --force
2. rm -rf package-lock.json
3. npm install caniuse-lite@1.0.30000974

and the error is gone…!!!

it seems like caniuse-lite has unpublished the bad version. rm -rf node_modules and reinstall deps. Update: sorry, got local cached response

same issue: on yarn v1.16.0 clear the browserlist is the temporary solution. "browserslist": { "production": [ ], "development": [ ] } }

Just update Browserslist. It has dirty fix.

How i can update Browserlist inside create-react-app? i have just installed latest Browserslist in devDependencies, but it doesn’t help me.

hello, after the fix my react project run but while compiling I got this:

You will see this warning until we will not have the real fix in postcss-preset-env

“browserslist”: []

This worked like a charm for me.

“browserslist”: { “production”: [ “>0.2%”, “not dead”, “not op_mini all” ], “development”: [ ] } Update to your package.json . it worked for me as well.

There isn’t a solution, but if you want to continue developing, remove development browserlist items in package.json works for me

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

@NaNdaWteK It worked for me.

Yes, worked also for me too!

delete these lines in the package json file “last 1 chrome version”, “last 1 firefox version”, “last 1 safari version”, “Android >= 4” an its worked

Same issue on nuxt right now

same in Nuxtjs create-nuxt-app

https://github.com/browserslist/browserslist/issues/382#issuecomment-502991170

Yeap, this issue can be closed here.

We in separated issue are finding solution to prevent problems on similar case in the future.

Any level of testing should have caught this, that is the contract cost of using dependancies. I hate to ask or look since I know what I’m getting isn’t what I’ll actually use when I care about the content I’m making, but do you need help developing better tests? This project is a nice relief for dealing with rolling changes in this bloated ecosystem. I’m confident if it needs to happen the community will come together to make sure this doesn’t happen again. It could have been any subdep changes that didn’t crash getting into your npm release.

OH BOY! what a dumpster fire. This broke my 2.1.8 build. Can’t get those 8 hours back…

I 100% understand that the blame here is distributed, but I still am considering ejecting and/or migrating away from react-scripts entirely. I can’t help but wonder which one of the dependencies will break next. There are over 50 direct dependencies in package.json when i eject a fresh project, and node_modules has around 1000 folders in it.

Is this REALLY the way to use react?

Also the only thing that worked for me was settings browserslist:[] in package.json as @anhquande has mentioned.

I think the issue is now fixed:

npm cache clean --force
rm -rf node_modules 
rm package-lock.json && npm install

or

yarn cache clean
rm -rf node_modules
rm yarn.lock && yarn

would do.

no it’s not, here: https://www.npmjs.com/package/caniuse-lite, version 1.0.30000975 is still active (which is also causing the problem)

@Creator-360 subscribe to https://twitter.com/Browserslist for recent updates

temporary solution

package.json “browserslist”: [],

“browserslist”: { “production”: [ “>0.2%”, “not dead”, “not op_mini all” ], “development”: [ ] } Update to your package.json . it worked for me as well.

Work for me, Thanks!

There isn’t a solution, but if you want to continue developing, remove development browserlist items in package.json works for me

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

Same issue and the workarond fix works good. Thanks!

Worked for me, thanks

same issue

BrowserslistError: Unknown browser query android all. Maybe you are using old Browserslist or made typo in query.
at Array.reduce ()
at Array.some ()
at Array.filter ()

npm: 6.9.0 node: 10.16.0 issue arising during: npm start (starting live server for creating react app)

same in Nuxtjs create-nuxt-app npm run dev help

 ERROR  Unknown browser query android all. Maybe you are using old Browserslist or made typo in query.

  at unknownQuery (node_modules/browserslist/index.js:204:10)
  at node_modules/browserslist/index.js:296:11

Same issue for : npm ver. 6.9.0 node ver. 12.4.0