Bad js using named import when mangle is enabled

[mtgto]

All code uploaded here: https://github.com/mtgto/example-swc-named-import-error

This code generates runtime error: Uncaught TypeError: c is not a function.

I check what causes this error:

• When I set jsc.type.module to commonjs, it does not cause an error.
  • Set jsc.type.module to es6, still cause same error.
  • Set jsc.type.module to blank, still cause same error.
• When I don't use named import, it does not cause an error.
  • ex: import React from "react"; React.useState(0); does not causes an error.
• When disable jsc.minify.mangle, it does not causes an error.

index.jsx

import { render } from "react-dom";
import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0); // causes runtime error
  //const [count, setCount] = React.useState(0); // It does not cause an error

  return (
    <div>Hello, world!</div>
  );
};

render(<App />, document.getElementById("root"));

webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const config = {
  entry: "./src/index.jsx",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(jsx)$/i,
        exclude: ["/node_modules/"],
        use: {
          loader: "swc-loader",
          options: {
            jsc: {
              // If set "es6" or undefined to module.type, it causes a runtime error. (`Uncaught TypeError: c is not a function`)
              // If set "commonjs" to module.type, it does not causes an error.
              /*
              module: {
                type: "commonjs",
              },
              */
              parser: {
                syntax: "ecmascript",
                jsx: true,
              },
              transform: {
                react: {
                  runtime: "classic",
                },
              },
              minify: {
                compress: {
                  toplevel: true,
                },
                mangle: {
                  toplevel: false,
                  keepClassNames: true,
                  keepFnNames: true,
                  keepPrivateProps: true,
                }
              }
            },
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js"],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

Firefox DevTools:

Pretty printed js (generated by firefox devtools):

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");


function _arrayLikeToArray(a, b) {
    (null == b || b > a.length) && (b = a.length);
    for(var c = 0, d = new Array(b); c < b; c++)d[c] = a[c];
    return d;
}
var d = undefined;
(0,react_dom__WEBPACK_IMPORTED_MODULE_0__.render)(react__WEBPACK_IMPORTED_MODULE_1__.createElement(function() {
    var a, c, f = (c = 2, function(a) {
        if (Array.isArray(a)) return a;
    }(a = c(0)) || function(a, c) { // ← "Uncaught TypeError: c is not a function"
        var d, e, f = null == a ? null : "undefined" != typeof Symbol && a[Symbol.iterator] || a["@@iterator"];
        if (null != f) {
            var g = [], h = !0, i = !1;
            try {
                for(f = f.call(a); !(h = (d = f.next()).done) && (g.push(d.value), !c || g.length !== c); h = !0);
            } catch (j) {
                i = !0, e = j;
            } finally{
                try {
                    h || null == f.return || f.return();
                } finally{
                    if (i) throw e;
                }
            }
            return g;
        }
    }(a, c) || function(a, b) {
        if (a) {
            if ("string" == typeof a) return _arrayLikeToArray(a, b);
            var c = Object.prototype.toString.call(a).slice(8, -1);
            if ("Object" === c && a.constructor && (c = a.constructor.name), "Map" === c || "Set" === c) return Array.from(c);
            if ("Arguments" === c || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)) return _arrayLikeToArray(a, b);
        }
    }(a, c) || function() {
        throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
    }());
    return f[0], f[1], react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", {
        __source: {
            fileName: "/Users/user/work/js/example-react-swc/src/index.jsx",
            lineNumber: 9,
            columnNumber: 5
        },
        __self: d
    }, "Hello, world!");
}, {
    __source: {
        fileName: "/Users/user/work/js/example-react-swc/src/index.jsx",
        lineNumber: 13,
        columnNumber: 8
    },
    __self: undefined
}), document.getElementById("root"));


//# sourceURL=webpack://my-webpack-project/./src/index.jsx?