如何在 Next.js 中动态加载实用程序方法？

Question

Doy you think it is wort to sort out logic to utility files and load dynamically to speed up site?

I have a getInvoiceDetails method in getInvoiceDetails.tsx file:

export default const getInvoiceDetails = (
  eventId: string
) => {

I import it in an other file, in a component:

const getInvoiceDetails = dynamic(
  () => import("../../Utility/BuyTicket/getInvoiceDetails")
);

and call it:

let resp = getInvoiceDetails(
      eventId

But yarn build raise an error:

  Not all constituents of type 'ComponentType<{}>' are callable.
    Type 'ComponentClass<{}, any>' has no call signatures.

  286 |   const callInvoiceDetails = () => {
  287 |     callSaveData();

> 288 |     let resp = getInvoiceDetails(
> Blockquote

Do you know what is wrong here?

Answer 1

Next.js dynamic import is used to dynamically import React components .

Here you are trying to import a utility function - you can simply use the regular ES2020 dynamic import instead.

const getInvoiceDetails = await import("../../Utility/BuyTicket/getInvoiceDetails");