babel/polyfill is deprecated warning in create-react-app

Question

I have a React app that I created using npx create-react-app my-app. I've been regularly updating both React and other npm packages.

A while ago, I started getting the following warning:

@babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately

The following is what's in my package.json file:

"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "redux-devtools": "^3.5.0"
  }

I found a few articles online about how to handle this but none of them look like the official solution. What's the right way to handle this?

So far, this has been a warning and not an error so I just postponed dealing with it. Today, I upgraded the moment package and that started giving me an error and I figured dealing with this issue first is a good starting point.

I'd appreciate some pointers in making this warning go away.

Answer 1

babel-polyfill is being replaced by core-js. You can remove babel-polyfill and install core-js instead. After you have installed core-js update the babel presets in your .babelrc or babel.config.js file with the following:

"presets":[
  ['@babel/preset-env',
  {
    useBuiltIns: 'usage',
    corejs: 3,
  }],
]

If you are importing babel-polyfill in your App you can remove that too. Also you can add a targets property in your presets

[
  '@babel/preset-env',
  {
    targets: {
      browsers: ['> 0.25%, not dead'],
    },
    useBuiltIns: 'usage',
    corejs: 3,
  },
]