1

I am working on application that needs to be run on IE 8 enterprise version.I am getting following errors in the console: Expected identifier : ; indexOf is not available for the object.

For solving this I read this question on stackoverflow: Babel 6.0.20 Modules feature not work in IE8 It suggests

transform-es3-member-expression-literals transform-es3-property-literals

to be added. But using this in webpack is not mentioned any where,not on babel official site. Can anyone suggest the way how can I use it as a plugin to my project.

Note:I have already tried doing

var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
plugins = [// Plugins for Webpack
new webpack.optimize.UglifyJsPlugin({minimize: false}),
new HtmlWebpackPlugin({
    template: 'index.html', // Move the index.html file...
    minify: { // Minifying it while it is parsed using the following, self–explanatory options
      removeComments: false,
      collapseWhitespace: false,
      removeRedundantAttributes: false,
      useShortDoctype: false,
      removeEmptyAttributes: false,
      removeStyleLinkTypeAttributes: false,
      keepClosingSlash: true,
      minifyJS: false,
      minifyCSS: true,
      minifyURLs: false
    }
  })
 new es3MemberExpressionLiterals(),
 new es3PropertyLiterals()

];
Community
  • 1
  • 1
simbathesailor
  • 3,681
  • 2
  • 19
  • 30

2 Answers2

2

I've created a demo repository on github to show the full configuration by an example.

To get the two plugins running create a .babelrc file, with the following content

{
  "plugins": [
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ]
}

In the standard configuration babel-loader in your webpack.config.js babel takes a look into the .babelrc to configure plugins.

// webpack.config.js (partial code only)
module: {
  loaders: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }
  ]
}

If everything is set up correctly webpack should transform the following code

// src/main.js
var foo = { catch: function() {} };
console.log(foo.catch)

into

// bundle.js
/* 0 */
/***/ function(module, exports) {

    var foo = { "catch": function () {} };
    console.log(foo["catch"]);

/***/ }

See also the examples for the plugins: babel-plugin-transform-es3-property-literals and babel-plugin-transform-es3-member-expression-literals.

dotcs
  • 2,286
  • 1
  • 18
  • 26
  • Awarded the bounty because it actually works as I asked, but I'm afraid I didn't explain myself correctly. My problem was something else. Anyway I sorted it out in a different way. Thanks for your effort! – Victor Dec 29 '16 at 10:49
  • Thanks for awarding the bounty. Sad to hear that this was not your actual problem in the end but I'm also glad that you found a solution for the real problem in the end. :) – dotcs Jan 02 '17 at 12:44
0

The question you link to is about Babel plugins, and you are trying to pass them as Webpack plugins. You'd need to set up Babel as a loader for your application and pass the plugins to that. Merge the following into your Webpack configuration.

module: {
  loaders: [{
    loader: 'babel',
    test: /\.js$/,
    exclude: /node_modules/,
    plugins: [
      'babel-plugin-transform-es3-member-expression-literals',
      'babel-plugin-transform-es3-property-literals',
    ],
  }],
},
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251