Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browserslist error #7239

Closed
razvan-soare opened this issue Jun 18, 2019 · 161 comments
Closed

Browserslist error #7239

razvan-soare opened this issue Jun 18, 2019 · 161 comments

Comments

@razvan-soare
Copy link

razvan-soare commented Jun 18, 2019

Hello, i just used 'npx create-react-app project-name' and when im starting my project im getting this error:

/src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
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 -v : 6.9.0
Node -v : v10.16.0

@akshayakrsh
Copy link

akshayakrsh commented Jun 18, 2019

Same issue for the same versions of node and npm

@pirey
Copy link

pirey commented Jun 18, 2019

Same issue with me

@bhavikji
Copy link

bhavikji commented Jun 18, 2019

Same issue for

Npm -v : 6.9.0
Node -v : v11.2.0

@epicbytes
Copy link

epicbytes commented Jun 18, 2019

yep - same issue. what we gonna do?

@ckristhoff
Copy link

ckristhoff commented Jun 18, 2019

Same here.
Node 11.6.0
npm 6.9.0

@epicbytes
Copy link

epicbytes commented Jun 18, 2019

may be we just downgrade version of browserlist to 4.6.1?
in 4.6.2 they are fixed android queries
() Fix last x version and similar queries for Android (by Tony Ross).

@bhavikji
Copy link

bhavikji commented Jun 18, 2019

@epicbytes don't we need to eject CRA for that?

@epicbytes
Copy link

epicbytes commented Jun 18, 2019

@epicbytes don't we need to eject CRA for that?

i dont know in this time, its just an idea)

@fantasticit
Copy link

fantasticit commented Jun 18, 2019

same issue

@SunJianMing
Copy link

SunJianMing commented Jun 18, 2019

Same issue

@akshayakrsh
Copy link

akshayakrsh commented Jun 18, 2019

If you want to pin browserslist version, pin it to 4.6.0.
4.6.2 = 4.6.1 + Readme changes
4.6.1 is the faulty one and was release 20days ago

@masak
Copy link

masak commented Jun 18, 2019

We're having the same issue here. Halp. 😞
Node v11.1.0
npm 6.1.0

@fireswork
Copy link

fireswork commented Jun 18, 2019

same issue 🙋

@ckristhoff
Copy link

ckristhoff commented Jun 18, 2019

If you want to pin browserslist version, pin it to 4.6.0.
4.6.2 = 4.6.1 + Readme changes
4.6.1 is the faulty one and was release 20days ago

Browserslist 4.6.0 still raises same error to me.

@b4h0-c4t
Copy link

b4h0-c4t commented Jun 18, 2019

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

@axlwang1976
Copy link

axlwang1976 commented Jun 18, 2019

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

@yb
Copy link

yb commented Jun 18, 2019

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

1 similar comment
@ulsha
Copy link

ulsha commented Jun 18, 2019

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

@anthonypenna
Copy link

anthonypenna commented Jun 18, 2019

Same issue:

node v 11.6.0
npm  v 6.5.0

@qwertybot
Copy link

qwertybot commented Jun 18, 2019

Same issue:

node v 10.16.0
npm v 6.9.0

@belio39
Copy link

belio39 commented Jun 18, 2019

Same issue:
./src/index.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
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 ()

@rinkisingh8181
Copy link

rinkisingh8181 commented Jun 18, 2019

Same issue

node v v10.13.0
npm v 6.4.1

@VincentLeonrdo
Copy link

VincentLeonrdo commented Jun 18, 2019

Same issue
npm 6.9.0
node v10.15.3

@jfchico
Copy link

jfchico commented Jun 18, 2019

Same here
npm 6.4.1
node 8.12.0

@mohammadsobhy
Copy link

mohammadsobhy commented Jun 18, 2019

same here
./src/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
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 ()

@sfatihk
Copy link

sfatihk commented Jun 18, 2019

browserslist/browserslist#382 (comment)

@alexandrsmirnov93
Copy link

alexandrsmirnov93 commented Jun 18, 2019

Same issue
npm 5.6.0
node 8.11.4

@hwiVeloper
Copy link

hwiVeloper commented Jun 18, 2019

same issue
node -v : v10.13.0
yarn -v : 1.16.0

@dev-zetta
Copy link

dev-zetta commented Jun 18, 2019

Same issue...

@hileix
Copy link

hileix commented Jun 18, 2019

Same issue.
node -v: 8.11.4
yarn -v: 1.16.0

@jaywcjlove
Copy link

jaywcjlove commented Jun 19, 2019

@liSong5713 Temporary solution:

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

@ycjcl868
Copy link

ycjcl868 commented Jun 19, 2019

temporary solution:

// package.json

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

maybe you can use umijs, it is not affected.

@etisdew
Copy link

etisdew commented Jun 19, 2019

This looks like a repeat of what the angular team ran into some time ago. Came to report left with a solution. Thank you! @jaywcjlove @4Eric

@jonathantneal
Copy link

jonathantneal commented Jun 19, 2019

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.

@mastoj
Copy link

mastoj commented Jun 20, 2019

How i can update Browserlist inside create-react-app?

yarn upgrade or npm update

Didn't help with update.

@umyar
Copy link

umyar commented Jun 20, 2019

How i can update Browserlist inside create-react-app?

yarn upgrade or npm update

Didn't help with update.

Try it stuff:

// package.json

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

There is some help.

@mastoj
Copy link

mastoj commented Jun 20, 2019

How i can update Browserlist inside create-react-app?

yarn upgrade or npm update

Didn't help with update.

Try it stuff:

// package.json

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

There is some help.

@umyar, that didn't help. Adding that actuall fails my build with the following message:

./src/App.css
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 ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! explorer@0.1.0 build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the explorer@0.1.0 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! /Users/tomasjansson/.npm/_logs/2019-06-20T12_55_59_151Z-debug.log

@nicdex
Copy link

nicdex commented Jun 20, 2019

This guy has the fix browserslist/browserslist#382 (comment). Just tried and it works.

@derek-adair
Copy link

derek-adair commented Jun 20, 2019

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.

@arifulbgt4
Copy link

arifulbgt4 commented Jun 21, 2019

temporary solution:

// package.json

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

maybe you can use umijs, it is not affected.

don't work

@zechau
Copy link

zechau commented Jun 21, 2019

temporary solution:

// package.json

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

maybe you can use umijs, it is not affected.

don't work

remove browserslist item, only set caniuse-lite, it worked for me. plus, you should use yarn or install npm-force-resolutions.

@ycjcl868
Copy link

ycjcl868 commented Jun 21, 2019

@zechau you can use yarn install, it's ok. resolutions

@zechau
Copy link

zechau commented Jun 21, 2019

@ycjcl868 gotcha.

@etisdew
Copy link

etisdew commented Jun 21, 2019

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.

@timurmamedov
Copy link

timurmamedov commented Jun 21, 2019

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

@jonathantneal
Copy link

jonathantneal commented Jun 21, 2019

@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. 😉

@kennethrivera
Copy link

kennethrivera commented Jun 21, 2019

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

I just tried it on my projects and it seems the issue is resolved.

@etisdew
Copy link

etisdew commented Jun 21, 2019

@jonathantneal I only feel empathy for the situation in which another repository is able to affect its downstream users. From a learning perspective what is the best way of managing and remediating dependancys and the possibility of dependency divergence? Rollback and lock until stable? Find/build alternatives?

My major concern is malicious injection through strategic compromise and the dangers of rolling dependencies. I know that in any sizable form they would be obvious and found in review but on the state of the culture, the idea of manually disabling an execution context from human input grows harder and harder in the context of an automated pipeline not using strict version semantics and open source suffering from non-viable donation models to give the time and attention where it deserves to be. Keep fighting the good fight, but I would be interested to learn more about how to handle these issues, isolating ones own project from them without going full hermit.

@ai
Copy link
Contributor

ai commented Jun 21, 2019

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

@derek-adair
Copy link

derek-adair commented Jun 21, 2019

@ai and all the other devs in create-react-app. THANK YOUUUU. I REALLY dont wanna eject, nor migrate, nor deal w/ the crap ya'll deal with.

This also highlights the absurdity that we deal w/ in the first place. The dependency-heavy-environment that we navigate is a result of the browser devs (read as Google/Firefox/Apple as orgs, NOT the engineers) lack of standards and coherency.

As endusers its super easy to place blame, CRA, or browserslists, or postcss-preset-env. The reality is that NONE of these would have to exist if the browser wasn't a giant flaming turd to develop on.

Thank you for propping up our shit env with your tools.


Now, what can we do to help avoid this?

EDIT: this=mitigating upstream dependencies breaking builds.

It TERRIFIES me that 1/900+ dependencies can potentially BREAK a production build.

@derek-adair
Copy link

derek-adair commented Jun 21, 2019

Question is definitely off topic... I am not even talking about this browserslists fiasco.

As a user of CRA, what kind of confidence can I have in this going forward that this wont just randomly break?

@etisdew
Copy link

etisdew commented Jun 21, 2019

I apologize for OT and discussion, I have to second the comment thanking you and all developers in the pipeline we have to manage everyday. You save me hours and headaches. Open source is a beautiful thing aswell. Issue seems to be largely closed yes?

@derek-adair
We can certainly have confidence that anything wrong will incur the recognition required to solve the issue with our cumulative knowledge and efforts. Its the smaller packages we sit on the shoulders of that need us most though they wont get our attention until its called for and something is already wrong. I guess the answer is some sense of community.

@ai
Copy link
Contributor

ai commented Jun 21, 2019

Yeap, this issue can be closed here.

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

@ianschmitz
Copy link
Contributor

ianschmitz commented Jun 22, 2019

As a user of CRA, what kind of confidence can I have in this going forward that this wont just randomly break?

That's what the package lock file prevents.

Closing this issue for now as it appears to be resolved. Will leave pinned for a couple days in case anyone is still running into this issue.

@derek-adair
Copy link

derek-adair commented Jun 22, 2019

That's what the package lock file prevents.

This broke a stable project on CRA 2.1.8. With said lock file, I was getting a warning saying to update caniuse-lite and browserslist. I did not update or change any deps; I woke up to builds failing.

I'd be happy to provide yarn.lock if useful.

@bugzpodder
Copy link

bugzpodder commented Jun 22, 2019

@derek-adair please file a new issue with commands your build ran and errors you saw. Also results to "yarn why caniuse-lite"

@lock lock bot locked and limited conversation to collaborators Jun 27, 2019
@iansu iansu unpinned this issue Jul 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests