How to force webpack to preserve async/await within the built file?-CodePudding

The minified bundle.js of my project (React and Typescript) contains yield instead of async/await. This is adding new bugs. How to ensure the bundle keeps async/await as is?

Webpack config extract:


module.exports = {
  target: ["web", 'es2020'],
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  mode: "production",
  entry: "./index.tsx",
  output: {
    filename: "js/bundle.[contenthash].min.js",
    path: resolve(__dirname, "../build"),
    publicPath: "/",
  },
  plugins: [],

  context: resolve(__dirname, "../src"),
  module: {
    rules: [
      {
        test: [/\.jsx?$/, /\.tsx?$/],
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
...

tsconfig

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "./@types"
    ],    
    "target": "es2019",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es2017",
      "es2019"
    ],
    "module": "esnext",
...

CodePudding user response：

Your js code is transformed by babel-loader which reads neither webpack target nor tsconfig. Modify your config into

module: {
    rules: [
      {
        test: [/\.jsx?$/, /\.tsx?$/],
        use: ["babel-loader"],
        exclude: /node_modules/,
        presets: [
            ['@babel/preset-env', { targets: "" /* your targeted browsers */ }]
        ]
      },

You could find more config in babel-loader doc, and for this simple task which doesn't involve any custom babel plugin, I'd suggest to use swc-loader which provides much better performance

CodePudding user response：

Following @Austaras advice I've managed to preserve async/await and also fix the bugs by adding another loader into the webpack config specifically for ts files:

{
  test: /\.jsx?$/,
  use: "babel-loader",
  exclude: /node_modules/,
},{
  test: /\.tsx?$/,
  loader: "ts-loader",
  exclude: /node_modules/,
  options: {
    projectReferences: true
  }
},