Property *** does not exist on type 'ExoticComponent

Question

I try to do code split in React / Next.js project, but facing with obstacles.

I am following the howto here: https://reactjs.org/docs/code-splitting.html

Importing here:

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

and using in useEffect here:

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);
  }, []);

but get this error:

./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.

Do you know maybe why it is wrong?

Before it worked without lazy loading:

import { SHA512 } from "crypto-js";

I also tryed Next.js workaround:

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

but got this error:

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) {

Alimo · Answer 1 · 2021-10-10T18:08:14.797

2

As mentioned 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.

So you can't use React.lazy for the crypto-js package because it doesn't export a React component.

You can use dynamic import in NextJS. As such:

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

edited Oct 10 '21 at 18:08

answered Oct 10 '21 at 18:03

Alimo

511
3
9

`useEffect` functions can't be `async` due to the implicit return promise. – AKX Oct 10 '21 at 18:06
@AKX Thank you for pointing that out. I've updated the code. – Alimo Oct 10 '21 at 18:09

score 1 · Accepted Answer · answered Oct 10 '21 at 18:02

import("crypto-js") returns a promise, that once resolved, has the API of the module. It's not a React component, hence you can't use React.lazy() on it. (You could use React.lazy with a module that exports a component.)

If you need to lazily load crypto-js within a React component, and then do things, you can do

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]);
}

or

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

However, depending on your bundler and bundler configuration it might be better to just use a regular import for the library, and instead lazily import (e.g. with React.lazy) the module that has this component that requires the library.

Lazy load the component and not the module? For me it seems webpack - in my setting - is not enough smart, and if module is imported anywhere, it will download even if it is not used on a component at all. — János, Oct 10 '21 at 18:28
I have an other issue here, but with icons, seems a bit similar, what do you think? https://stackoverflow.com/questions/69517872/how-to-load-icons-d%C3%ADnamicall-in-next-js — János, Oct 10 '21 at 18:29
Importing a module could have side effects, so yes, a static import will pull in the module unless you tell Webpack the module is pure and doesn't have side effects. — AKX, Oct 10 '21 at 18:29

Property *** does not exist on type 'ExoticComponent

2 Answers2