Use webpack and babel to convert ES6 to ES5 file javascript but it doesn't work

Question

I use webpack and babel to convert ES6 to ES5 file javascript but it doesn't work. File code javascript contains many functions.

This is file webpack.config.cjs:

module: {
        rules: [
            {
                use: {
                    loader: 'babel-loader', // Use babel-loader for transpilation
                }
            }
        ]
    }

When I use original file, it works normally, but when I use minified file after use webpack, it return error with "handleChange is not function"... What do I need to do to fix it? Thanks

Answer 1

My code in webpack.config.js (this code should be added to rules array):

  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env"],
      },
    },
  },

My code in package.json:

"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.22.20",

Does it useful for you? Looks like presets are lacks in your code.

babel.config.json (this file should be created near of webpack.config.js)

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}