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