在 Nextjs 上导入 html-to-draftjs

Question

我无法在我的 Nextjs 项目中导入 html-to-draftjs。如果我导入它：

import htmlToDraft from "html-to-draftjs"

结果将是：

我尝试使用动态导入：

const htmlToDraft = dynamic(
  () => {
    return import("html-to-draftjs");
  },
  { ssr: false }
);

结果是：

有没有其他我可以尝试的导入方法？或者有没有我可以使用的替代 htmltodraft 模块？谢谢！

Answer 1

window 对象在服务器上不可用。所以错误发生在服务器上。如果你只想在浏览器上运行 htmlToDraft 那么你应该在 componentDidMount 上运行它，因为我看到你正在使用 class 组件。

componentDidMount 生命周期方法只在 Next JS 的客户端执行。

render 方法将在服务器和客户端中执行。这就是你得到那个错误的原因。将其放入 componentDidMount

Answer 2

如果您使用功能组件，还有 2 种其他方法

1st Method:

将您的“html-to-draftjs”包降级到 1.4 版，这样您就可以直接导入它，而无需使用“dyanmic”导入方法。

2nd Method:

这样导入包：

let htmlToDraft = null;
if (typeof window === 'object') {
    htmlToDraft = require('html-to-draftjs').default;
}

Answer 3

以前的解决方案之一的现代语法解决方案如下所示：

const htmlToDraft = typeof window === 'object' && require('html-to-draftjs').default;

Import html-to-draftjs on Nextjs