属性 *** 在类型 '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") returns 一个承诺，一旦解决，就会有模块的 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 takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

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

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

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

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

Property *** does not exist on type 'ExoticComponent<any>

reactjs

code-splitting

next.js