将html-to-draftjs导入Nextjs上。

Question

我无法在我的Nextjs项目上导入html到draftjs。如果我用以下方式导入它：

import htmlToDraft from "html-to-draftjs"

其结果将是：

​

​

我尝试使用动态导入：

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

结果是：

​

，我还可以尝试其他的导入方法吗？或者，我是否可以使用其他的htmlto草稿模块？谢谢你！

Answer 1

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

componentDidMount生命周期方法仅在下一个JS的客户端执行。

render方法将在服务器和客户端执行。所以你才会犯这个错误。把它放进componentDidMount

Answer 2

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

1st Method:

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

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;