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

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

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

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

NextJS решает эту проблему, обеспечивая динамический импорт (оболочка вокруг react-loadable), который:

  • загружать компонент только при необходимости,
  • предоставляет возможность загружать компонент только на стороне клиента (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, но мой код теперь молча терпит неудачу.


reactjs node.js javascript next.js react-loadable
person Avi Kaminetzky    schedule 01.01.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

Ссылка на официальное руководство

person Avi Kaminetzky    schedule 01.01.2019
comment
Я запутался, почему бы просто не использовать обычную функцию? - person Naftali aka Neal; 02.01.2019
comment
А затем вызовите его во время перехвата жизненного цикла только на стороне клиента. Не используйте динамическую функцию - это только для реагирующих компонентов. - person Naftali aka Neal; 02.01.2019

arrow_upward
1
arrow_downward

Экспорт по умолчанию работает только с оператором import from, вы можете попробовать

export creditCardScript;

И при импорте вы можете использовать вот так

const {creditCardScript} = dynamic(import("./creditCardScript"), { ssr: false });
person vengleab so    schedule 05.03.2020