javascript - 动态导入 - 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（特定于浏览器）不会被调用，直到componentDidMount.

NextJS 通过提供动态导入（ 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

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

Answer 1

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

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

链接到官方教程

Answer 2

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

export creditCardScript;

在导入时，你可以像这样使用

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