Create-react-app: Noise when building: "Browserslist: caniuse-lite is outdated"

[gaearon]

Saw this unactionable warning noise when building a newly created project.

[iansu]

Can you confirm that you're using react-scripts 2.1.8? I looked at the linked PR and it seems like this warning should only appear if the latest browser in caniuse-lite is more than six months old. I checked our versions of browserslist and its included version of caniuse-lite and both were released less than a month ago. I'm also unable to reproduce this error with a newly created project.

That said, this warning will still appear for people with older versions of react-scripts so we should try to get this fixed in browserslist.

[schneidmaster]

FWIW, I can reproduce this in both 2.1.8 and 3.0.0 of react-scripts

[iansu]

Can you provide instructions or a reproducible project? I don't see this in either version.

[gaearon]

I still get it on every run.

[schneidmaster]

I just reproduced it with 3.0.0:

1. create-react-app reproduce-browserslist
2. cd reproduce-browserslist
3. yarn build

Result (warning message on the fourth line):

➜ yarn build
yarn run v1.12.1
$ react-scripts build
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.44 KB  build/static/js/2.b41502e9.chunk.js
  762 B     build/static/js/runtime~main.a8a9905a.js
  602 B     build/static/js/main.28647029.chunk.js
  523 B     build/static/css/main.b50db813.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

✨  Done in 7.18s.

I can push up the repo if you'd like but I made no changes after initializing with CRA so I'm not sure how much it would help.

[gaearon]

Maybe this only happens with yarn?

[schneidmaster]

I can reproduce with npm as well, same setup:

➜ npm run build
npm WARN lifecycle The node binary used for scripts is /Users/zach/.asdf/shims/node but npm is using /Users/zach/.asdf/installs/nodejs/8.12.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] build /Users/zach/Developer/Sundry/reproduce-browserslist
> react-scripts build

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Creating an optimized production build...
Compiled successfully.

<other stuff omitted for brevity>

[iansu]

This is very weird. I just created a branch new project with 3.0.0 using npx create-react-app test-app and then ran yarn build in the project and I didn't see that message.

@gaearon I pretty much exclusively use Yarn so I don't think that's the cause. It might be worth following up in the linked issue on browserslist to see if we can get them to remove this message.

[schneidmaster]

I figured out the problem. My global installation of create-react-app was on an older 2.x version. It looks like CRA copies a cached yarn.lock into the project directory when creating a new project -- so every app created by the older version of CRA will be locked to an older version of caniuse-lite out of the box. For my existing project, I was able to get rid of the warning by manually deleting the caniuse-lite entries from my yarn.lock and reinstalling (to allow them to float up to the latest version), and I no longer see the warning in a new project after upgrading to CRA 3.0.0 globally (which is also why @iansu could never reproduce - you were already on the new version of CRA globally).

[iansu]

@schneidmaster I did notice you were using a global install of Create React App but you mentioned using version 3 so I figured you had updated it. If you were actually using an old version then it makes sense that you saw the message. But why is @gaearon seeing it? I'm guessing you're not using a global install, right Dan?

[schneidmaster]

Yeah, I had updated react-scripts to 3.0 in my existing project (which wasn't sufficient to force caniuse-lite to update ). I hadn't updated CRA itself.

[beausmith]

Worked for me: (h/t to @schneidmaster)

1. rm yarn.lock - delete yarn lock file
2. yarn to recreate yarn lock file

I don't recall which order of operations regarding upgrade of my global CRA install vs project update.

[schneidmaster]

For what it's worth, it should be sufficient to search caniuse-lite@ in your yarn.lock, delete just those entries, and reinstall. That avoids the versions floating for all your other packages.

[replaysMike]

@schneidmaster your suggestion is the only thing that resolved it for me. In my case I was unable to build if I updated all packages, and/or try to recreate the yarn lock file. I wasn't interested in fixing 100 build errors due to package upgrades atm!

[jankalfus]

I'm also seeing this warning after upgrading from 2.x version of react-scripts to 3.0.0. I'm using NPM, so the yarn workaround doesn't apply to me. I'm not sure how to get rid of the warning as I believe it's an issue with one of react-scripts' dependencies.

[martinmckenna]

I'm getting this warning in an ejected CRA. I've tried to upgrade to react-dev-utils@^9.0.1 since browserslist is a dependency, but the warning still remains.

My (partial) package.json

  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-typescript": "^7.1.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.4.8",
    "axe-core": "^3.1.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-preset-react-app": "^7.0.0",
    "browserslist": "^4.6.3",
    "caniuse-lite": "^1.0.30000975",
    "core-js": "^2.6.5",
    "css-loader": "^2.1.0",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "react-dev-utils": "^9.0.1",
    "typescript": "^3.2.2",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.2.0"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ],

[bugzpodder]

remove your package-lock.json or yarn.lock and try again

[martinmckenna]

Removing the yarn.lock isn’t really an option for me. I’m working with a huge app and don’t want everything upgrading

[bugzpodder]

Remove caniuse-lite entry in yarn.lock and re-running yarn will update that entry only.

[yamyamyuo]

For what it's worth, it should be sufficient to search caniuse-lite@ in your yarn.lock, delete just those entries, and reinstall. That avoids the versions floating for all your other packages.

this works for me

[ianschmitz]

Closing as this issue seems to be resolved. If you're still experiencing the issue see https://github.com/facebook/create-react-app/issues/6708#issuecomment-488392836.