动态导入 - NextJS

Question

我有一个加载脚本的简单函数：

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（特定于浏览器）的代码在 [=15= 之前不会被调用].

NextJS 通过 providing dynamic imports (a wrapper around react-loadable) 解决了这个问题：

仅在需要时加载组件，
提供了仅在客户端加载组件的选项 (ssr: false).

我继续实施动态导入：

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

在componentDidMount中：

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

但我明白了： Uncaught TypeError: Cannot call a class as a function

我尝试将函数转换为 class 并使用构造函数传入 args，但我的代码现在失败了。

Answer 1

正如Neal在评论中提到的，我需要做的就是在componentDidMount中做这样的事情：

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

Link to the official tutorial

Answer 2

导出默认只对import from语句起作用，你可以试试

export creditCardScript;

导入时，你可以这样使用

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

动态导入 - NextJS

Dynamic Imports - NextJS

javascript

node.js

reactjs

next.js

react-loadable