Core-js: IE 11: padStart (used by a thirdparty react component) not getting polyfilled when using babel-preset-env with useBuiltIns: usage

[kashifshamaz21]

Hi,

I'm using a thirdparty React component: react-dates , and when i use it on a web-app and load it on IE-11, i get the following error due to padStart not being supported on IE-11.

Error on IE-11:
Object doesn't support property or method 'padStart'

Following are the versions of babel and core-js i'm using
package.json

"core-js": "^3.1.3",
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",

.babelrc

{
    "presets": [
        [
            "@babel/env", 
            {
                "useBuiltIns": "usage",
                "corejs": "3.0.0",
            }
        ],
        "@babel/typescript",
        "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

[zloirock]

Do you transpile your node_modules?

[nicolo-ribaudo]

Since you are using a .babelrc file, you are not transpiling your modules: Babel can't see that it should load the polyfill if it doesn't transpiel those files.
You have four options:

1. Use babel.config.js and transpile your dependencies. I suggest only transpiling the dependencies you know that should be transpiled. If you decide to transpile everything, you should exclude core-js and @babel/runtime.
2. Tell Babel that that dependency needs that polyfill. You can do something like that:
   js useBuiltIns: String.prototype.padStart; import "react-dates";
   This is not a special Babel syntax: Babel will see this normal statement which uses String.prototype.padStart and load the polyfill.
3. Manually import the polyfill:
   js import "core-js/features/string/pad-start"; import "react-dates";
4. Use useBuiltIns: "entry" instead of "usage", which will load any polyfill not supported by your target environments.

[kashifshamaz21]

Hi @nicolo-ribaudo , thanks for your inputs, that helped. For now, I have gone ahead with option 3, and used manual imports for getting this issue resolved. My preferred approach is to go with option 1, but i haven't used babel for transpiling my dependencies as yet, so will explore it when i get some time.

For anyone else who stumbles upon this issue and lands on this thread, following are the manual imports i did to fix this issue:

import 'core-js/stable/object';                            // Object.Keys is needed from this module bundle
import "core-js/modules/es.string.pad-start"; // this is the one used by react-dates
import { DateRangePicker } from 'react-dates';

Closing this issue as I was able to resolve this with above.
@nicolo-ribaudo @zloirock Thanks for your help guys. :)

[zloirock]

One moment: I don't recommend to use polyfills from /modules/ path directly since they could require some implicit dependencies. Instead of

import "core-js/modules/es.string.pad-start";

it would be better to use

import "core-js/features/string/pad-start";

[nicolo-ribaudo]

I will update my answer, in case someone finds this issue and doesn't read to the end :+1: