5

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.

Sam
  • 26,817
  • 58
  • 206
  • 383

1 Answers1

7

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,
  },
]
technoY2K
  • 2,442
  • 1
  • 24
  • 38
  • Maybe I'm not following your instructions fully. I replaced `"babel-polyfill": "^6.26.0"` with `"core-js": "3.6.5"` under the `devDependencies` section in the `package.json` file but when I run `npm start` to compile my React app, I'm still getting the same error as I was getting before. I do NOT see a `.babelrc` or `babel.config.js` file in my app's directory. I do, however, see a ton of references to `babel` in the `package-lock.json` file. Before I installed `core-js`, I deleted the `npm_modules` folder along with `package-lock.json` file. What am I doing wrong? – Sam May 01 '20 at 22:14
  • Basically, I updated my `package.json` file to use `core-js` instead of `babel-pollyfill`, removed `npm_modules` folder and `package-lock.json` file. Then ran `npm i` to install all the packages fresh. Anyway, as I mentioned before, I'm still getting the same error when I start the compilation process. – Sam May 01 '20 at 22:17
  • I apologize you said you were using Create React App @Sam – technoY2K May 01 '20 at 22:19
  • Also, my `react-scripts` package is up-to-date i.e. `"react-scripts": "^3.4.1"`. I thought there may be references in there to `babel`. – Sam May 01 '20 at 22:20
  • Yes, I created my React app using Create React App. How does that affect this? – Sam May 01 '20 at 22:21
  • 1
    Unfortunately its not easy to customize the babel config using CRA without ejecting. Found a way. Let me know if this points you in the right direction. https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/ @sam – technoY2K May 01 '20 at 22:22
  • Once you can get a hold of customizing the babel config file update it with with the above answer. – technoY2K May 01 '20 at 22:23
  • I feel this whole process goes against the idea of using `create-react-app`? This is what I hate about `JavaScript` development. I'm constantly distracted from developing the app that I'm supposed to work on to deal with all these lower level concerns -- sorry just venting but I honestly feel that way. – Sam May 01 '20 at 22:33
  • Just looking at `create-react-app` repo and looks like that's been updated and in `package.json` file, I see that they removed references to `babel`. – Sam May 01 '20 at 22:34
  • No I definitely feel your pain @Sam. Actually I myself have moved on to Golang myself because of this very same issue in JS dev. But with CRA you have essentially "locked" yourself into their defaults. – technoY2K May 01 '20 at 22:34
  • Anyway, thank you for your help. I'll mark it as answer. – Sam May 01 '20 at 22:35