Why is babel-loader not transforming object rest/spread?

Question

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!

Answer 1

The cause for me was, in the webpack config, only checking for js files eg 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.