动态导入 - 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"); 

官方教程链接