Webpack keeps converting async/await to _async_to_generator, how can I disable this feature?

[nalrashidi]

Dear Webpack community

I'm using Webpack in my project, and I've noticed that it's converting my async/await code into _async_to_generator functions in the final output. For compatibility reasons, I’d like to keep the original async/await syntax without this transformation.

I've tried tweaking some settings but haven't had any luck yet. Does anyone know how to disable this behavior in Webpack (or perhaps with a specific plugin)? Any advice would be appreciated!

This is my Webpack.config.json:
`const path = require("path");
const fs = require('fs');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CustomPostProcessPlugin = require('./plugins/Class_Handler');

const isDev = true;

module.exports = {
// mode: "production",
mode: isDev ? "development" : "production",
target: ['web', 'es6'],

// adding source map for debugging
devtool: isDev ? "inline-source-map" : false,

// input files:
entry: {
    // "main" will be the output file
    main: path.resolve(__dirname, "src/index.js")
},

// for dev server:
devServer: {
    static: [
        { directory: path.resolve(__dirname, "dist") },
        { directory: path.resolve(__dirname, "public") }
    ],
    port: 3000,
    open: false, // "open: true" means to open the browser automatically
    hot: true, // "hot: true" means hot reloading
    compress: true, // to compress the bundle gzip
    allowedHosts: "all",
    headers: {
        'Cache-Control': 'max-age=3600',
    },
    https: {
        key: fs.readFileSync("src/shared/certs/private.key"),
        cert: fs.readFileSync("src/shared/certs/cert.crt"),
    },
    // Use {index:"/"} instead of 'true' to handle 404 errors
    historyApiFallback: {
        index: "/"
    }
},

// after running "npm run build" this will be the output:
output: {
    // output folder path:
    path: path.resolve(__dirname, "dist"),
    // output file:
    filename: "[name].[contenthash].js",
    // remove old "dist" files: 
    clean: true,
    assetModuleFilename: "[name][ext]",
    publicPath: "/"
},

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
        },
        {
            test: /\.ts?$/,
            exclude: /node_modules/,
            enforce: 'pre',
            use: {
                loader: 'swc-loader',
                options: {
                    jsc: {
                        parser: {
                            syntax: 'typescript'
                        },
                        target: 'ES6'
                    }
                }
            }
        },
        {
            test: /\.(png|jpg|jpeg|gif|webp)$/i,
            type: "asset/resource"
        },
        {
            test: /\.(js|jsx|html|ts|tsx)$/,
            exclude: /node_modules/,
            enforce: 'pre',
            use: {
                loader: path.resolve(__dirname, 'plugins/JSX_Parser.js')
            }
        },
        {
            test: /\.html$/i,
            loader: "raw-loader"
        },
        {
            test: /\.svg$/,
            loader: 'svg-inline-loader'
        },
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./public/index.html"
    }),
    new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
    new CustomPostProcessPlugin()
],

resolve: {
    alias: {
        "@src": path.resolve(__dirname, "./src"),
        "@shared": path.resolve(__dirname, "./src/shared"),
        "@static": path.resolve(__dirname, "./src/static"),
        "@utilities": path.resolve(__dirname, "./src/utilities"),
        "@assets": path.resolve(__dirname, "./src/static/assets"),
        "@mixins": path.resolve(__dirname, "./src/mixins.scss"),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.scss'], // Add .scss if needed
},
optimization: {
    minimize: false,
},

}
`

Thanks in advance!

[nalrashidi]

For more info

Original code:

Output:

[absidue]

You configured swc-loader to output ES6 code but async/await was added in ES2017, which is why it is downlevelling your async/await code.

[alexander-akait]

There is a right answer