Next.js 13 中同构-dompurify 和 dompurify 的兼容性问题

Compatibility issue with isomorphic-dompurify and dompurify in Next.js 13

提问人:Tom Fan 提问时间:6/6/2023 更新时间:10/13/2023 访问量:283

问:

我在 Next.js 13 项目中遇到了同构 dompurify 和 dompurify 的兼容性问题。

由于对画布的依赖,似乎这两个库都无法使用,我目前无法找到合适的替代方案。

Module not found: Can't resolve 'canvas' in "/my-file"

当我跑步时

npm i canvas

终端中的错误显示

npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/usr/local/bin/node 
...

实际上,在开发模式下,错误仅控制台。

我将非常感谢对替代库的任何建议或有关如何在 Next.js 13 中克服同构 dompurify 和 dompurify 的兼容性问题的建议。

提前感谢您的帮助!

如果没有同构-dompurify的解决方案,我将安装另一个xss prevent库。

JavaScript ReactJS TypeScript Next.js Dompurify

评论


答:

0赞 Henk Van de Berg 10/13/2023 #1

当我在寻找相关内容时偶然发现了您的问题。4 个月后,但 FWIW:

该错误似乎来自 JSDOM,其中包括 canvas 作为可选依赖项 (info)。

只需在 webpack 中将其声明为“外部”就为我解决了。

module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.externals = [...config.externals, "canvas", "jsdom"];
    return config;
  },
};

更多信息请点击这里