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通过providing dynamic imports（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

正如评论中提到的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

2 个答案: