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??
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??
2 Answers
Reset to default 6Question: 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.
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/,
]
},
exclude: []options. – PlayMa256 Commented Jan 4, 2019 at 17:27webpack.config.js? I already tried that but it doesn't change anything. Same for adding theexclude: []to the.babelrc.jsconfig, no change. – Michael Commented Jan 4, 2019 at 17:33babel.config.js, see here: babeljs.io/docs/en/options#configfile. So after renaming the config file theexclude: /node_modules\/(?!(MY_MODULE |ANOTHER-ONE)\/).*/,solution works fine now. – Michael Commented Jan 7, 2019 at 8:53