React/Next.js代码分割引入crypto-js报ExoticComponent类型错误

• 第一类错误（React.lazy/next.dynamic使用报错）：React.lazy 和 Next.js 提供的 dynamic 方法仅支持懒加载React组件，无法用来加载普通第三方工具库的导出方法，它们的返回值是React组件类型，自然不存在SHA512属性，因此触发类型错误。
• 第二类错误（useEffect内直接使用await报错）：await 关键字只能在async标记的异步函数、或者模块顶层作用域中使用，你直接在useEffect的同步回调函数里写await，不符合JS语法规则，因此报错。

正确的实现方式是在useEffect内部定义异步加载函数，调用动态import加载crypto-js后再使用SHA512方法，示例代码如下：

useEffect(() => {
  // 定义异步加载函数
  const loadCryptoAndTrack = async () => {
    // 动态加载crypto-js
    const { SHA512 } = await import("crypto-js");
    setTimeout(() => {
      let window2: any = window;
      if (window2.bp && process.env.NEXT_PUBLIC_BARION_ID) {
        const { totalPriceInt, unitPriceInt } = calcUnitAndTotalPrice(
          startPaymentIn,
          buyTicketData
        );
        window2.bp("track", "initiateCheckout", {
          contentType: "Product",
          currency: "HUF",
          id: startPaymentIn.eventId,
          name: buyTicketData?.name,
          quantity: startPaymentIn.quantity ?? 1.0,
          unit: "db",
          imageUrl: `https://ticket-t01.s3.eu-central-1.amazonaws.com/${buyTicketData?.imgId}_0.cover.jpg`,
          list: "ProductPage",
        });
        window2.bp("track", "setUserProperties", {
          userId: SHA512(getTempUserId(localStorage)).toString(),
        });
      }
    }, 4000);
  };
  // 调用异步函数
  loadCryptoAndTrack();
}, []);

该写法既满足代码分割要求，crypto-js会被单独拆分为独立chunk，仅在组件渲染后才加载，同时完全符合语法规则，不会触发报错。

内容的提问来源于stack exchange，提问作者János