How to transpile node_modules modules with babel-loader?

Question

Problem: I want to build bundle files for a website for older browsers (>= IE10).

My transpiled code throws errors on old Internet Explorer 11 when I transpile the code with babel 7.x using babel-loader as it seems node_modules modules won't get transpiled anymore by default?

Question: How can I make sure that all my node_module modules will be transpiled if they aren't transpiled by the package author already?

webpack.config.js using babel-loader

// webpack.config.js
rules: [
    {
        test: /\.(js|jsx)$/,
        use: [
            {
                loader: 'babel-loader',
            },
        ],
        exclude: [],
    },
],

babelrc.js config using babel 7.x

// .babelrc.js
module.exports = function(api) {
    const presets = [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                ignoreBrowserslistConfig: true,
                targets: {
                    node: 8,
                    browsers: [
                        'last 3 versions',
                        '> 1% in DE',
                        'Explorer >= 10',
                    ],
                },
            },
        ],
        '@babel/preset-react',
    ];

    const plugins = [
        // ...
    ];

    return {
        presets,
        plugins,
    };
};

---

Update 1:

It was an issue with babel. My babel config was named .babel.rc and babel 7 default setting is to look for a config file named babel.config.js, see here.

So after renaming the babel config file from ´.babel.rc´ to ´babel.config.js´ I could apply a solution in my ´webpack.config.js´ described here to transform untransformed ´node_modules´ packages with a solution like that:

// webpack.config.js
rules: [
    {
        test: /\.(js|jsx)$/,
        use: [
            {
                loader: 'babel-loader',
            },
        ],
        // Exclude the untransformed packages from the exclude rule here
        exclude: /node_modules\/(?!(MY_MODULE|ANOTHER-ONE)\/).*/, 
    },
],

Question: It feels like workaround, but isn't there a more convenient way to handle such issues? I just pretend there will be more and more untransformed packages outside in the near future (following this discussion) and do we always have to manually put the package names for it in webpacks' exclude rule??

Answer 1

Question: It feels like workaround, but isn't there a more convenient way to handle such issues? I just pretend there will be more and more untransformed packages outside in the near future (following this discussion) and do we always have to manually put the package names for it in webpacks' exclude rule??

You can use modules like are-you-es5 to automatically create an exception list or test: https://www.npmjs.com/package/are-you-es5

Also things like eslint-plugin-compat could potentially warn you of issues if pointed at your node_modules: https://www.npmjs.com/package/eslint-plugin-compat

It's not perfect though. I think in production settings in general you should just be cognizant of the packages you add before adding them or have some automated tests that would catch browser errors if IE11 is critical for your project.

I know it is not always possible but I would strongly suggest pushing IE11 and below to some lower tier support. It is very difficult to still maintain IE11 and below while using modern JS.