属性 *** 在类型 'ExoticComponent<any> 上不存在

Question

我尝试在 React / Next.js 项目中进行代码拆分，但遇到了障碍。

我正在关注这里的操作方法：https://reactjs.org/docs/code-splitting.html

在此处导入：

const { SHA512 } = React.lazy(() => import("crypto-js"));

并在这里使用useEffect：

useEffect(() => {
    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(), // <--- HERE
        });
      }
    }, 4000);
  }, []);

但得到这个错误：

./components/LoginAndRegistration.tsx:25:9
Type error: Property 'SHA512' does not exist on type 'ExoticComponent<any> & { readonly _result: ComponentType<any>; }'.

  23 | import { GoogleLogin } from "react-google-login";
  24 | import axios from "axios";
> 25 | const { SHA512 } = React.lazy(() => import("crypto-js"));
     |         ^
  26 | 
  27 | interface LoginAndRegistrationProps {
  28 |   isRegistration: boolean;
error Command failed with exit code 1.

你知道为什么会出错吗？

在没有延迟加载的情况下工作之前：

import { SHA512 } from "crypto-js";

我也尝试了 Next.js 解决方法：

import dynamic from "next/dynamic";
const { SHA512 } = dynamic(() => import("crypto-js"));

但出现此错误：

Type error: 'await' expressions are only allowed within async functions and at the top levels of modules.

  130 | 
  131 |   useEffect(() => {
> 132 |     const { SHA512 } = await import("crypto-js");
      |                        ^
  133 |     setTimeout(() => {
  134 |       let window2: any = window;
  135 |       if (window2.bp && process.env.NEXT_PUBLIC_BARION_ID) {

Answer 1

import("crypto-js") 返回一个承诺，一旦解决，就拥有模块的 API。它不是 React 组件，因此您不能在其上使用 React.lazy()。 （您可以将React.lazy 与导出组件的模块一起使用。）

如果你需要在一个 React 组件中懒加载crypto-js，然后做一些事情，你可以做

function MyComponent() {
  const [cryptoJs, setCryptoJs] = React.useState(null);
  React.useEffect(() => import("crypto-js").then(setCryptoJs), []);
  React.useEffect(() => {
    if(!cryptoJs) return;  // not loaded yet...
    const { SHA512 } = cryptoJs;
    // ...
  }, [cryptoJs]);
}

或

function MyComponent() {
  React.useEffect(() => {
    import("crypto-js").then(({ SHA512 }) => {
      // ...
    });
  }, []);
}

但是，根据您的捆绑器和捆绑器配置，最好只对库使用常规import，而不是延迟导入（例如使用React.lazy）具有需要该库的组件的模块。

Answer 2

如here所述，

React.lazy 采用一个必须调用动态import() 的函数。这必须返回一个 Promise 解析为一个带有 default 导出包含 React 组件的模块。

因此，您不能将 React.lazy 用于 crypto-js 包，因为它不会导出 React 组件。

你可以在 NextJS 中使用dynamic import。因此：

useEffect(() => {
  import('crypto-js').then(({ SHA512 }) => {
    // Use SHA512 here
  });
}, []);