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

Question

I'm encountering a compatibility issue with isomorphic-dompurify and dompurify in my Next.js 13 project.

It seems that both libraries cannot be used due to dependencies on canvas, and I'm currently unable to find a suitable alternative.

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

When I run

npm i canvas

Error display in terminal

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 
...

In fact, the error only console in development mode.

I would greatly appreciate any recommendations for alternative libraries or suggestions on how to overcome this compatibility issue with isomorphic-dompurify and dompurify in Next.js 13.

Thank you in advance for your help!

I am going to install another xss prevent library if there is no solution for isomorphic-dompurify.

Answer 1

Just stumbled upon your question as I was searching for something related. 4 months later, but FWIW:

The error seems to come from JSDOM, which includes canvas as an optional dependency (info).

Just declaring it as 'external' in webpack solved it for me.

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

More info here