动态导入- 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"导入脚本。

正弦NextJS在节点中呈现组件服务器端，需要注意确保任何引用window (特定于浏览器)的代码在componentDidMount之前都不会被调用。

NextJS通过提供动态进口 (反应可加载的包装器)解决了这个问题，它：

• 只有在需要时才加载组件，
• 提供仅在客户端(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

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

Answer 1

正如尼尔在评论中提到的，我所需要做的就是在componentDidMount中这样做

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

链接到官方教程

Answer 2

导出默认仅适用于import from语句，您可以尝试

export creditCardScript;

在进口上，你可以像这样使用

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