Babel-loader: Enable es6 polyfills

[voronianski]

I have such webpack config for babel-loader:

// ...
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?stage=0&optional=runtime&externalHelpers']
    }
}

However running such code let copy = someArray.copyWithin(0); returns Uncaught TypeError: someArray.copyWithin is not a function, any ideas (it works in repl)?

Some other methods like Object.assign work fine..

[zloirock]

Methods of instances not polyfilled with runtime transformer.

[voronianski]

@zloirock how I can enable them?

[zloirock]

Disable runtime transformer and use babel/polyfill / default version core-js.

[voronianski]

@zloirock thanks

[voronianski]

@zloirock I have another issue now:

webpack config:

// ...
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?stage=0&externalHelpers']
    }
}

and inside my app.js:

// polyfills
import 'babel/polyfill';

but got error in console Uncaught ReferenceError: babelHelpers is not defined.

[zloirock]

Also include babel-core/external-helpers.

[voronianski]

@zloirock I thought 'babel?stage=0&externalHelpers']' includes it.

[nlutterman]

@voronianski I just had this problem and solved it by installing the babel package on top of of babel-core. I'm not sure if that's the right, solution though.

I was reading through an issue on Babel itself and it's mentioned:

...it's literally the same package with a different package.json...

So it feels weird requiring the both of them... but it works.

@zloirock Can you provide a little more information about how to include the external-helpers?

[nlutterman]

Oh, good lord... change

    import 'babel/polyfill';

to

    import 'babel-core/polyfill';

That'll do it. It doesn't require the external-helpers or installing babel separately, then.

[ghost]

@nlutterman yes! I only use babel-load on webpack.config.js and
import 'babel/polyfill';
or
import 'babel-core/polyfill';
both works fine.

So this it babel issue or webpack issue?

[simon-nguyen]

@xushao0305 @nlutterman
I also use babel-load and config it inside webpack.config.js
All I need to do to put a single import statement inside my app.module.es6

import 'babel-core/polyfill';
...
angular.module(...);

And my app is now generating ES6 Symbol properly. No more Symbol is undefined error in IE 11 or Safari.

[PinkyJie]

@simon-nguyen Is there a way that make bable-core/polyfill a separate entry point, and use conditional comment in index.html to only include this entry point for IE browser?
I tried this in webpack.config.js:

entry: {
    app: [
        entryJs
    ],
    'ie-polyfill': 'babel-core/polyfill.js'
}

and put conditional comments in index.jade:

// babel polyfill for IE
<!--[if IE]>
<script src="ie-polyfill.{%=o.webpack.hash%}.js"></script>
<![endif]-->

But it's not working, I don't want to put this polyfill in for all browsers, I only want to include this for IE.

[delacruz-dev]

@PinkyJie did you find a solution for your issue? I'm running on the same problem here :\

[PinkyJie]

@danderu I have no solution, because conditional comments is not support from IE 10, we must include this shim file for all browsers.

[delacruz-dev]

@PinkyJie ok! thanks :)

[d3viant0ne]

Resolving this as a resolution to the initial question exists in the issue

[bengsfort]

Just a heads up to those finding this from Google that haven't looked at the site lately (like me), the polyfill is no longer available in babel-core/polyfill unless I just really screwed up big time somewhere somehow, but it's now a separate module altogether.

npm install --save-dev babel-polyfill

Then you can set it as an entry in your webpack config:

...
entry: [
  'babel-polyfill',
  './app/index'
],
...

or import it:

import 'babel-polyfill';

Docs: https://babeljs.io/docs/usage/polyfill/