Hermann Dettmann
Reputation: 240
Why is babel-loader not transforming object rest/spread?
I recently discovered in one of my projects that almost all of my JS code breaks in Edge 18 after the use of object rest/spread syntax. That was surprising to me as I expected that babel is transforming that into Edge compatible code but as I found out it does not. So went for @babel/plugin-proposal-object-rest-spread and added it to my webpack config and rerun webpack again. But with no luck. I used the debug option of babel to check if the plugin is actual used and the output says it does. But when I check the transpiled JS I still find the spread syntax in there completely untouched.
Babel debug output:
Using targets:
{
"android": "4.4",
"chrome": "74",
"edge": "17",
"firefox": "67",
"ios": "10",
"safari": "10"
}
Using modules transform: false
Using plugins:
transform-template-literals { "android":"4.4", "ios":"10", "safari":"10" }
transform-literals { "android":"4.4" }
transform-function-name { "android":"4.4", "edge":"17" }
transform-arrow-functions { "android":"4.4" }
transform-block-scoped-functions { "android":"4.4" }
transform-classes { "android":"4.4" }
transform-object-super { "android":"4.4" }
transform-shorthand-properties { "android":"4.4" }
transform-duplicate-keys { "android":"4.4" }
transform-computed-properties { "android":"4.4" }
transform-for-of { "android":"4.4" }
transform-sticky-regex { "android":"4.4" }
transform-dotall-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
transform-unicode-regex { "android":"4.4", "ios":"10", "safari":"10" }
transform-spread { "android":"4.4" }
transform-parameters { "android":"4.4", "edge":"17" }
transform-destructuring { "android":"4.4", "edge":"17" }
transform-block-scoping { "android":"4.4", "ios":"10", "safari":"10" }
transform-new-target { "android":"4.4" }
transform-regenerator { "android":"4.4" }
transform-exponentiation-operator { "android":"4.4", "ios":"10", "safari":"10" }
transform-async-to-generator { "android":"4.4", "ios":"10", "safari":"10" }
proposal-async-generator-functions { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-object-rest-spread { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-unicode-property-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
proposal-json-strings { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-optional-catch-binding { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
transform-named-capturing-groups-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
Using polyfills with `usage` option:
[/app/node_modules/swiper/dist/js/swiper.esm.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.find { "android":"4.4" }
es.array.includes { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.map { "android":"4.4" }
es.array.slice { "android":"4.4" }
es.array.sort { "android":"4.4", "ios":"10", "safari":"10" }
es.array.splice { "android":"4.4" }
es.object.get-own-property-descriptor { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.object.to-string { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.parse-int { "android":"4.4" }
es.regexp.to-string { "android":"4.4", "edge":"17" }
es.string.includes { "android":"4.4", "edge":"17" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
esnext.array.last-index { "android":"4.4", "chrome":"74", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
64% building 687/752 modules 65 active /app/node_modules/lodash-es/padStart.js
[/app/node_modules/dom7/dist/dom7.modular.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.splice { "android":"4.4" }
es.object.assign { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
es.string.trim { "android":"4.4", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
Hash: b3541120009438066b1e
Version: webpack 4.30.0 / grunt-webpack 3.1.3
So since then I desperately try to get babel to transpile the code but nothing happens and I ran out of ideas and search terms to try. What makes it even more wierd is that the stack I used is nothing special and I used it already in other projects and never had that issue.
I'm using Vue, Webpack + Babel. Webpack is run via Grunt.
My webpack config:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function (grunt, options) {
/* skip loading if task is not necessary for current target */
if (!grunt.isConfigLoadingRequired('webpack')) {
return {};
}
return (function () {
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const DotenvPlugin = require('dotenv-webpack');
const webpack = require('webpack');
const plugins = [
new webpack.IgnorePlugin(/^(.*)$/, /node-jsb$/),
new DotenvPlugin(),
new VueLoaderPlugin(),
];
/* remember to update jest transformer at tests/setup/ when changing loader options */
const getLoaderRulesConfig = (targets, debug = false) => ([
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'import-glob',
include: [path.resolve('<%= paths.src %>')],
},
{
test: /\.js$/,
loader: 'babel-loader',
/* remember to update jest transformIgnorePatterns at grunt/config/jest.js when adding includes */
include: [
path.resolve('<%= paths.src %>'),
path.resolve('node_modules/dom7'),
path.resolve('node_modules/swiper'),
],
options: {
compact: true,
cacheDirectory: true,
cacheCompression: false,
babelrc: false,
plugins: [
[
'@babel/plugin-transform-runtime', {
regenerator: false,
useESModules: true,
},
],
'@babel/plugin-proposal-object-rest-spread',
['@babel/plugin-proposal-class-properties', { loose: true }],
],
presets: [
[
'@babel/preset-env', {
modules: false,
loose: true,
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
targets,
debug,
},
],
],
},
},
]);
return {
options: {
cache: true,
entry: {
main: './<%= paths.src %>/js/_main.js',
},
output: {
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
path: path.resolve('<%= paths.static %>/generated/'),
publicPath: '/static/generated/',
},
plugins,
resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: false,
},
performance: {
maxEntrypointSize: 500000,
maxAssetSize: 500000,
},
},
analyze: {
mode: 'production',
watch: true,
stats: {
maxModules: 99999,
},
optimization: {
concatenateModules: false,
},
output: {
path: path.resolve('<%= paths.tmp %>/js/'),
},
module: {
rules: getLoaderRulesConfig({ esmodules: true }, true),
},
plugins: [new BundleAnalyzerPlugin()],
},
dev: {
mode: 'development',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }, true),
},
},
devModern: {
mode: 'development',
devtool: 'source-map',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
dist: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }),
},
},
distModern: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
};
}());
};
I would love to hear your thoughts and I ideas what I maybe missed!
Upvotes: 2
Views: 1102
Answers (1)
Rob Middleton
Reputation: 111
The cause for me was, in the webpack config, only checking for js files e.g. test: /\.js$/ as I only had js files in the codebase.
What I didn't realize is some of the node_modules were .mjs files, and were being ignored by babel completely.
The fix was to use test: /\.m?js$/ in the webpack config to include .mjs files.
Upvotes: 1
Related Questions
- Can't get webpack to work client-side with Babel
- Can't get babel to transpile spread operator even WITH plugin
- Vue - You may need an additional loader to handle the result of these loaders
- Not able to spread an object with babel-plugin-transform-object-rest-spread added for vue cli 3 setup
- Configure Webpack, Node, and the Babel object rest spread transform
- Webpack with babel-loader not emitting valid es5
- Webpack & Babel-Loader - Unexpected Token on Object Rest Operator, with transform-object-rest-spread Plugin Installed
- babel-loader not transpiling and without error
- babel-loader not transpiling
- use babel-loader but Object.assign is not a function