Динамический импорт - NextJS - PullRequest
Новая
       32

Динамический импорт - NextJS

0 голосов
/ 01 января 2019

У меня есть простая функция, которая загружает скрипт: 

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;

До того, как перейти на NextJS, я импортировал скрипт с: import creditCardScript from "./creditCardScript".

Sine NextJS рендерит сервер компонентовсторона Node, необходимо позаботиться о том, чтобы любой код со ссылкой на window (который зависит от браузера) не вызывался до тех пор, пока componentDidMount.

NextJS не решит эту проблему с помощью , обеспечивающий динамический импорт (обертка вокруг с возможностью реактивной загрузки ), которая:

  • загружает компонент только при необходимости,
  • предоставляет возможностьзагружать компонент только на стороне клиента (ssr: false).

Я реализовал динамический импорт: 

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

In componentDidMount: 

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

Но я получаю следующее: Uncaught TypeError: Cannot call a class as a function

Я пытался преобразовать функцию в класс и использовать конструктор для передачи args, но мой код теперь не работает молча.

1 Ответ

0 голосов
/ 01 января 2019

Поскольку Нил упоминается в комментариях, все, что мне нужно сделать, это что-то вроде этого в componentDidMount: 

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

Ссылка на официальный учебник

...