Dynamic Imports - NextJS

Question

I have a simple function which loads a script:

const creditCardScript = (
  onReadyCB,
  onErrorCB,
) => {
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = process.CREDIT_CARD_SCRIPT;
  document.head.appendChild(script);

  script.onload = function() {
    ...
  };
};

export default creditCardScript;

Before I migrated to NextJS, I was importing the script with: import creditCardScript from "./creditCardScript".

Sine NextJS renders components server side in Node, care needs to be taken to ensure that any code with a reference to window (which is browser specific), doesn't get called until componentDidMount.

NextJS solves this issue by providing dynamic imports (a wrapper around react-loadable) which:

only load the component when needed,
provides an option to only load the component on client side (ssr: false).

I went ahead and implemented dynamic imports:

const creditCardScript = dynamic(import("./creditCardScript"), { ssr: false });

In componentDidMount:

componentDidMount = () => {
  creditCardScript(
    this.onReadyCB,
    this.onErrorCB
  );
};

But I'm getting this: Uncaught TypeError: Cannot call a class as a function

I've tried to convert the function to a class and use the constructor to pass in args, but my code now fails silently.

Avi Kaminetzky · Accepted Answer · 2019-01-02T17:55:38.570

5

As Neal mentioned in the comments, all I need to do is something like this in componentDidMount:

const { default: creditCardScript } = await import("./creditCardScript");

Link to the official tutorial

edited Jan 02 '19 at 17:55

answered Jan 01 '19 at 18:38

Avi Kaminetzky

1,489
2
19
42

1

I am confused, why not just use a regular function? – Naftali Jan 02 '19 at 15:20
2

And then call it during a client side only lifecycle hook. Dont use the dynamic function -- that is only for react components. – Naftali Jan 02 '19 at 15:24

score 2 · Answer 2 · answered Mar 05 '20 at 02:49

2

Export default only work with import from statement, you can try

export creditCardScript;

And on import, u can use like this

const {creditCardScript} = dynamic(import("./creditCardScript"), { ssr: false });

answered Mar 05 '20 at 02:49

Vengleab SO

716
4
11

Dynamic Imports - NextJS

2 Answers2