[Bug Report]: use builtins.presetEnv & antd-mobile@5 ActionSheet component; --> ERROR: [ Uncaught TypeError: Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method. ]

System Info

System: OS: macOS 12.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 15.55 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v14.20.0/bin/yarn npm: 8.19.1 - ~/.nvm/versions/node/v14.20.0/bin/npm Browsers: Chrome: 111.0.5563.64 npmPackages: @rspack/cli: 0.1.6 => 0.1.6

Details

Uncaught TypeError: Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableRest (_non_iterable_rest.mjs:2:1)
    at _slicedToArray (_sliced_to_array.mjs:7:1)
    at J (index.js:1:1)
    at Popup (popup.js:31:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)

The above error occurred in the <Popup> component:
    in Popup (created by ActionSheet)
    in ActionSheet (at App.jsx>:31)
    in div (at App.jsx>:17)
    in App (at main.jsx>:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught TypeError: Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableRest (_non_iterable_rest.mjs:2:1)
    at _slicedToArray (_sliced_to_array.mjs:7:1)
    at J (index.js:1:1)
    at Popup (popup.js:31:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)

Reproduce link

https://github.com/lzsheng/lzs/tree/rspack-antd-mobile-v5

Reproduce Steps

init & run dev

yarn install yarn dev

error condition

rspack.config.js 1、builtins.presetEnv

    presetEnv: {
      mode: "entry",
      targets: ["Android >= 5.1"],
      coreJs: "3",
    }

App.jsx 2、 import { ActionSheet } from "antd-mobile";

demo

import React from "react";
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import { ActionSheet, Button } from "antd-mobile";

const actions = [
  { text: "复制", key: "copy" },
  { text: "修改", key: "edit" },
  { text: "保存", key: "save" },
];

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div className="card">

        {/* Button组件不会有问题 */}
        <Button color="primary" onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </Button>
      </div>

      {/* 出bug的组件ActionSheet */}
      <ActionSheet
        extra="请选择你要进行的操作"
        visible={true}
        cancelText="取消"
        actions={actions}
        closeOnMaskClick={false}
        popupClassName="action-sheet-common"
        onClose={() => {}}
      />
    </div>
  );
}

description：

If presetEnv is not configured, no error is reported

If ActionSheet is not used, no error is reported

rspack.config.js

module.exports = {
  context: __dirname,
  entry: {
    main: "./src/main.jsx",
  },
  builtins: {
    html: [
      {
        template: "./index.html",
      },
    ],
    target: ["web"],
    presetEnv: {
      mode: "entry",
      targets: ["Android >= 5.1"],
      coreJs: "3",
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        type: "jsx", // https://www.rspack.dev/zh/guide/react.html
      },
      {
        test: /\.svg$/,
        type: "asset",
      },
      {
        test: /.less$/,
        use: [
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
        type: "css",
      },
    ],
  },
};

package.json

{
  "name": "rspack-react-starter",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "rspack serve",
    "build": "npx rspack --mode=production build --config ./rspack.config.js"
  },
  "dependencies": {
    "antd-mobile": "5.27.0",
    "core-js": "3.19.1",
    "history": "^4.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-loadable": "^5.5.0",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0"
  },
  "devDependencies": {
    "@rspack/cli": "0.1.6",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "less": "^3.9.0",
    "less-loader": "^11.1.0"
  }
}

web-infra-dev / rspack