CODEWITHSUNDEEP
javascriptwebpacknode-modulesbabeljsbabel-loader
Michael
Michael

Reputation: 513

How to transpile node_modules modules with babel-loader?

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??

Upvotes: 34

Views: 28933

Answers (2)

Qiulang
Qiulang

Reputation: 12405

I know it was an old question but recently I spent quite some time to fix the same problem so I would like to share my experience too.

First, exclude: /node_modules\/(?!(MY_MODULE|ANOTHER-ONE)\/).*/ only works for *nix but not window because window uses / for path, so a universal solution using regex would be exclude: /node_modules(?!(\/|\\)MY_MODULE|ANOTHER-ONE)/

Second, using negative lookahead regex does feel awkward and https://github.com/babel/babel-loader#some-files-in-my-node_modules-are-not-transpiled-for-ie-11 has a better way

exclude: {
      and: [/node_modules/], // Exclude libraries in node_modules ...
      not: [
        // Except for a few of them that needs to be transpiled for IE
        /unfetch/,
        /d3-array|d3-scale/,
        /@hapi[\\/]joi-date/,
      ]
    },

Upvotes: 0

otw
otw

Reputation: 660

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.

Upvotes: 6

Related Questions