Arrow function not getting transpiled inside node_modules
See original GitHub issueBug Report
Current behavior I am using a 3rd party library called joi-date as follows const joiDate = require(‘@hapi/joi-date’);
The issue is The arrow function used in @hapi/joi-date is not getting transpiled in IE11 due to which my app does not work in IE11. i attached the screenshot below. I am using babel7 and webpack4
Input Code
Here is my webpack config
{
test: /\.js$/,
exclude: /node_modules\/(?!.*hapi\/joi-date)/,
loader: 'babel-loader',
},
Tried using function version as well but did not help
exclude: function(modulePath) {
return /node_modules/.test(modulePath) &&
!/node_modules\/@hapi\/joi-date/.test(modulePath);
},
Expected behavior Babel-loader should convert the arrow function into es2015 style function
Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)
- Filename: .babelrc
{
.babelrc entries
{
"presets": [
"@babel/env",
"@babel/react",
"@babel/preset-flow"
],
"env": {
"development": {
"plugins": [
"react-hot-loader/babel"
]
}
},
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": false,
"regenerator": true
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
]
}
}
Environment
- Babel version(s): 7.0.0
- Node/npm version: 12.16.3
- OS: OSX 10.13.4
- Monorepo:No
- How you are using Babel: loader
Additional context
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Babel not transpiling arrow functions (Webpack)
I think an issue is related to query-string because it's written in ES6 and not transpiled to ES5. Try to downgrade version from...
Read more >Webpack 5 Beta + babel-loader: Why do I still have arrow ...
I dug through the v4 to v5 migration docs, forked babel-loader, migrated it to the latest API, then published it to npm with...
Read more >babel/plugin-transform-arrow-functions
Wrap the generated function in .bind(this) and keeps uses of this inside the function as-is, instead of using a renamed this .
Read more >babel-loader - npm
Some files in my node_modules are not transpiled for IE 11 ... Top level function (IIFE) is still arrow (on Webpack 5).
Read more >Babel does not transpile a JSX instance of an arrow function ...
As another answer mentions, JSX syntax is usually used in situations like ReactDOM.render(...) where it can be unambiguously identified as an expression, so ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you are running webpack on Windows, see also https://github.com/babel/babel-loader/pull/883/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R101 for how to include
@hapi/joi-date
but exclude all the other node_modules.@brvenkat If you change your
node_modules
exclusion regex toexclude: [/node_modules\/(?!(@hapi\/joi-date|@hapi\/joi)\/).*/],
then it would start transpiling these modules.