Webpack, IE8, and ES6 Modules

Question

Recent versions of webpack do not support IE8. I tried from 12/12/12 (which I thought was the latest version to support IE8), but still getting errors from the non-shimmable Object.defineProperty .

https://github.com/webpack/webpack/issues/2085

What was the latest version of webpack to support IE8? Has it ever worked with ES6 modules?

webpack.config.js:

 var webpack = require("webpack"); var es3ifyPlugin = require('es3ify-webpack-plugin'); var productionPlugin = new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }); var devPlugin = new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("dev") } }); module.exports = { entry: { assessment: "./src/aaa/app.js" }, //devtool: "source-map", output: { path: "../AAA/wwwroot/js", filename: "[name].bundle.js", publicPath: "/" }, resolve: { extensions: ["", ".js"] }, module: { preLoaders: [ { test: /\.js$/, loader: "eslint-loader", exclude: "node_modules" } ], loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { // todo: move less compiling to web project test: /\.less$/, loader: "style-loader!css-loader!less-loader", exclude: "node_modules" }, ] }, devServer: { historyApiFallback: true, inline: true, proxy: { "/api": { "target": { host: "localhost", protocol: "http:", port: "58211", }, changeOrigin: true, pathRewrite: { "^/api": "" } } }, publicPath: "/assets/" }, plugins: [ new es3ifyPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: isExternal }), productionPlugin //devPlugin ] } function isExternal(module) { var userRequest = module.userRequest; if (typeof userRequest !== "string") { return false; } return userRequest.indexOf("node_modules") >= 0; } 

The transparent code looks like this:

 exports.test = '123'; webpackJsonp([1, 0], [ function (module, exports, __webpack_require__) { 'use strict'; var _imported = __webpack_require__(1); alert('test ' + _imported.test); function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var test = exports.test = 123; } ]); 

Answer 1

The problem is how babel translates ES2015 code by default. In default mode (without decoupling) it uses Object.defineProperty , but this can be configured using fre-mode.

 // webpack.config.js module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: [ ['es2015', {"loose": true}] ] } } ] } 

This results in the following compiled code:

 /* 0 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var _imported = __webpack_require__(1); var _imported2 = _interopRequireDefault(_imported); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log('test ' + _imported2.default); /***/ }, /* 1 */ /***/ function(module, exports) { "use strict"; exports.__esModule = true; var test = 123; exports.default = test; /***/ } /******/ ]) 

Old answer

From the discussion, as this solved your problem:

1.13.0 was released on April 15, 2016. It seems like this should work. Are you sure you are not using getters / setters in your application code? Maybe you can create a super simple example with just the hello world sample code and try to create an assembly using version 1.13. The Object.defineProperty code should not use Object.defineProperty , I think.