I'm trying to configure webpack (5) with babel, using babel-loader to transpile to ES5. Unfortunately, the output is not consistent. Basically, it's divided into two parts:
Some polyfills:
My code:
As you can see, the first part contains arrow functions, and the second one not.
I've tried to add @babel/plugin-proposal-class-properties
and @babel/plugin-transform-arrow-functions
to my .babelrc
file, but the class-properties
is missing (with debug enabled).
I must admit, I'm not sure that the class-properties
is the problem, but after spending hours on google it was my best shot, so maybe I'm wrong about the source of the problem.
webpack file:
export default {
entry: './src/index.js',
mode: 'production',
output: {
path: path.resolve(__dirname, '..', '..', 'dist'),
filename: 'bundle.prod.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
.babelrc
file:
{
"presets": [
[
"@babel/preset-env",
{
"corejs": {
"version": 3
},
"useBuiltIns": "usage",
"debug": true
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-arrow-functions"
]
}
Node dependencies:
"@babel/core": "7.11.6",
"@babel/plugin-proposal-class-properties": "7.10.4",
"@babel/plugin-transform-arrow-functions": "7.10.4",
"@babel/preset-env": "7.11.5",
"@babel/register": "7.11.5",
"babel-loader": "8.1.0",
"core-js": "3.6.5",
"webpack": "5.0.0",
"webpack-cli": "4.0.0",
"webpack-merge": "5.2.0"
i had a similar problem with webpack v5
Arrow Function in Bootstrap
i needed to change the config from webback and add:
target: ['es5']
module: {
rules: [.....]
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
target: ['es5']
Weback V5 target config
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With