Webpack build fails for IE (11)
Solution 1
Since it is a custom webpack configuration and it is not clear there is any additional configuration to babel, try to add @babel/plugin-transform-shorthand-properties plugin to babel-loader
options for .vue
files.
loaders: {
js: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-shorthand-properties']
}
},
sass: 'sass-loader'
}
Solution 2
from the output it is confirmed that shorthand property is not getting transpiled
you are using the shorthand property of ES6 which is not supported on iE you need to configure the babel config so that it transpiled this into older version ( for more info about browser support visit this link)
to make your babel config compatible for ie use something like this in babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
"useBuiltIns": true
}],
]
}
if that dosen't work try changing you devtool
config in webpack (for example eval
to something else ) and check this thread of github
Rob
Updated on June 17, 2022Comments
-
Rob almost 2 years
Trying to setup webpack to build my
.js
and.vue
files.Seems to no transpile
_name() {}
style function to regular JavaScript.Thought it should do that out of the box, straight into commons js unless otherwise specified.
No idea why, it's crashing only in IE with some generic JS syntax error about semi colon out of place.
I guess some little flag, setting, something, somewhere.
Looking for some suggestions here.
ex vue
<script> export default { computed: { _name() { return 'blah'; } } }; </script>
package.json
"@babel/core": "7.0.0-beta.42", "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42", "@babel/preset-env": "7.0.0-beta.42", "babel-loader": "8.0.0-beta.2", "vue-loader": "9.5.1", "vue-style-loader": "1.0.0", "sass-loader": "3.2.3", "node-sass": "^4.1.1", "css-loader": "0.25.0", "style-loader": "0.13.1", "vue-html-loader": "1.2.3", "file-loader": "^0.8.4", "webpack": "3.4.1", "webpack-dev-server": "1.16.1", "webpack-stream": "3.2.0", "copy-webpack-plugin": "3.0.1", "replace-webpack-plugin": "0.1.2", "uglifyjs-webpack-plugin": "1.2.7"
config
entry: [__dirname + '/../src/bootstrap.js'], output: { path: __dirname + '/../public', filename: 'app.min.js', chunkFilename: "[name].[chunkhash:4].js", publicPath: '/', }, plugins: [ new CopyWebpackPlugin( (function () { var copy = [{ to: '', from: __dirname + '/../src/core/assets' }, { to: '', from: __dirname + '/../src/app/assets' }]; if (data.copy) { copy.concat(data.copy); } return copy; })() ), new ReplacePlugin({ skip: false, entry: 'src/index.html', output: '/public/index.html', hash: '[hash]', data: { scripts: data.scripts } }) ], module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.vue$/, // exclude: /node_modules/, loader: 'vue-loader', options: { loaders: { js: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, sass: 'sass-loader' } } }] }
build looks like this
/***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony default export */ __webpack_exports__["default"] = ({ props: ['name', 'timeout', 'max'], computed: { _name() { return this.name || 'global'; }, ...
EDIT:
In the end it was just a matter of adding a few specific transform plugins in the
.babelrc
file at the root. Probably better way to do this via config. Took a while to match the transforms to each error, but the following set worked for me.{ "plugins": [ "@babel/plugin-transform-spread", "@babel/plugin-transform-destructuring", "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-template-literals", "@babel/plugin-transform-computed-properties", "@babel/plugin-transform-shorthand-properties" ] }
Note: each plugin needs to be installed as a dependency also.
-
Rob over 5 yearsThis led me down the right road, check edit for full answer if anyone comes here.