Babel 6.0.20 Modules feature not work in IE8

Question

I am trying to export a es6 module in header.js:

export default {
    setHeaderHighlight: function (index) {
        // do somethings
    }
};

And import it in index.js:

import header from "./header.js"

$(function () {
    header.setHeaderHighlight(0);
});

Then transformation comes out in index.bundle.js:

var _header = __webpack_require__(129);

var _header2 = _interopRequireDefault(_header);

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj }; // crash here
}

So here is the problem, ie8 will rise a Expected identifier Exception at { default: obj }, but everythings is ok >=ie9.

Is there something i can do with this?

I found a temporary solution: `webpack -p` will do the same thing of that two babel es3 plugins. — Bruce, Nov 07 '15 at 13:04

loganfsmyth · Accepted Answer · 2015-11-04T17:08:58.277

30

By default, Babel 6.x requires you to enable an explicit set of transformations. The standard es2015 preset converts ES6 to ES5, however IE8 is not ES5-compatible. In this case, if you look at the plugins list, you will see

These will convert your properties to be compatible with IE8. Generally in Babel 6.x you'd do this by passing those names as part of your plugins array, alongside the presets array and install the transforms via

npm install --save-dev babel-plugin-transform-es3-member-expression-literals babel-plugin-transform-es3-property-literals

edited Nov 04 '15 at 17:08

answered Nov 04 '15 at 03:03

loganfsmyth

156,129
30
331
251

I install the plugins, add them in `.babelrc` and restart the build. But it still not work. Is there something I miss? – Bruce Nov 04 '15 at 03:45
1

@Bruce Looking into it, my steps are what _should_ work, but they aren't. I've filed a bug: https://github.com/babel/babel/issues/2817 – loganfsmyth Nov 04 '15 at 17:20
2

The solution above worked for me, but note if you have a default module import like `import * from 'jquery'`, it will still expand as `_jquery2.default` which uses the 'default' reserved keyword, breaking IE. – Doug Nov 10 '15 at 06:10
Yeah, here's a snippet from compiiled babel code, even using the two es3 pugins mentioned above: `exports.default = {` when exporting an object literal as the default export of a module – jacheson Nov 16 '15 at 18:06
@loganfsmyth could you add a link to the issue on phabricator? Couldn't find it when I looked now – SimenB Nov 27 '15 at 16:00
1

Phabricator link is here: https://phabricator.babeljs.io/T2817 The issue numbers are the same as the old Github ones. – loganfsmyth Nov 27 '15 at 18:13
4

Who is up voting this? This dosnt solve the issue for me at all! Crashing at the exact same spot. – jennas Feb 02 '16 at 04:15
1

If you have a specific case that isn't working, please file a bug. This is the correct answer, and if it doesn't work we need bug reports. – loganfsmyth Apr 26 '17 at 22:13

score 6 · Answer 2 · edited Dec 18 '15 at 06:23

6

I use webpack + es3ify-loader as workaround.

loaders: {
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['es3ify', `babel?${JSON.stringify(babelQuery)}`],
  },
}

edited Dec 18 '15 at 06:23

approxiblue

6,982
16
51
59

answered Dec 18 '15 at 05:56

sorrycc

111
1
3

I tried that approach but I'm getting "Parse Error: Line 1: Missing from after import" but does not make any sense :/ – gabrielhpugliese Jan 06 '16 at 21:21
1

Fixed it, order matters :) – gabrielhpugliese Jan 06 '16 at 21:25
1

Note: in Webpack2 you must name the `es3ify` loader as `es3ify-loader` - and `babel` as `babel-loader`, took me half an hour to understand :) – Shlomi Apr 04 '17 at 18:31

score 2 · Answer 3 · answered Jun 01 '16 at 06:04

2

I also have the problem, and I wrote a webpack plugin to resolve it. I didn't really know if there is a nicer way to handle it, but it works.

The module in node_modules also works well.

answered Jun 01 '16 at 06:04

brycehq

21
1

Babel 6.0.20 Modules feature not work in IE8

3 Answers3

Linked