Module parse failed: Unexpected token (24:23)

Question

`This is the full error message`

File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | } = failure; | const msg = path.length === 0 ? message : At path: ${path.join('.')} -- ${message};

super(explanation ?? msg);

| if (explanation != null) this.cause = msg; | Object.assign(this, rest);

`Webpack Config`

const { resolve } = require("path");

const entry = resolve(__dirname, "./src/index.js");
const moduleConfig = {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"]
        }
      }
    },
    {
      test: /node_modules[\\/]@metamask/,
      use: {
        loader: "esbuild-loader",
        options: {
          loader: "jsx", 
          target: "es2015"
        }
      }
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.mp4$/,
      use: 'file-loader'
    },
    {
      test: /\.svg$/,
      use: '@svgr/webpack'
    },
    {
      test: /\.gif$/,
      use: 'file-loader'
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.png$/,
      use: 'file-loader'
    },
    {
        test: /\.jpg$/,
        use: 'file-loader'
      },
  ]
};

const output = {
  path: resolve(__dirname, "dist"),
  filename: "bundle.js",
};

module.exports = {
  entry,
  module: moduleConfig,
  output,
  resolve: {
    fallback: {
        fs: false,
        http: false,
        "https": require.resolve("https-browserify"),
        tls: require.resolve("tls"),
        "crypto": require.resolve("crypto-browserify"),
        "net": require.resolve("net-browserify"),
        "http": require.resolve("stream-http"),
        "os": require.resolve("os-browserify/browser"),
        "vm": require.resolve("vm-browserify"),
        "buffer": require.resolve("buffer/"),
        "child_process": false ,
        "tls": false,
        "stream": require.resolve("stream-browserify"),
        "path": require.resolve("path-browserify"),
        "querystring": require.resolve("querystring-es3"),
        "zlib": require.resolve("browserify-zlib")
    }
}
};

Dev dependencies

  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "ajv": "^8.12.0",
    "babel-loader": "^9.1.3",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "css-loader": "^6.10.0",
    "esbuild-loader": "^4.0.3",
    "eslint": "^6.6.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.31.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "prettier": "^1.19.1",
    "react-svg-loader": "^3.0.3",
    "sass-loader": "^14.1.1",
    "style-loader": "^3.3.4",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  }