Can't resolve 'canvas' on next.js serverless app

[EnricoNapolitan]

What's the problem

I built a next.js application with serveless option, but simply importing this library it throws this error:

Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/.../node_modules/jsdom/lib/jsdom'
> Build error occurred

I already tried to add canvas library but this doesn't fix the problem and it throws another error.

Step to reproduce

Add to next.config.js:

module.exports = {
  target: 'serverless'
}

Run next build

Basic Info:

• "isomorphic-dompurify": "^0.12.0",
• "next": "^10.0.8",
• "react": "^17.0.1",
• "react-dom": "^17.0.1"

This issue could be related to #35 , but i don't use umijs.

[eharkins]

@EnricoNapolitan did you find a solution? I'm encountering something similar with Gatsby.

[kkomelin]

Thanks for your detailed bug report @EnricoNapolitan. Since many people experience this issue, I will try to find a solution myself.
Linking it here just for reference #36

[NicholasEllul]

I think I've seen this come up with JSDOM before. JSDOM marks canvas as an optional dependency https://github.com/jsdom/jsdom/blob/master/package.json#L58

[kkomelin]

Hi @NicholasEllul,
Thanks for the info. I'd like to try to add Canvas as an optional dependency too and see if it fixes the issue.

[kkomelin]

I've reproduced the bug locally. Will try to find a solution.

[kkomelin]

My hypothesis that adding canvas as an optional dependency to isomporphic-dompurify didn't work out.
I'm thinking about adding canvas as a normal dependency. What do you think about it, @NicholasEllul?

How would it affect our existing users?
Should we release a major version with that change?

[kkomelin]

I've tried to add canvas as a normal dependency but it caused new errors on npm run build:

> next build

info  - Creating an optimized production build  
Failed to compile.

./node_modules/canvas/build/Release/canvas.node 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

> Build error occurred
Error: > Build failed because of webpack errors
    at [my path]/nextjs-dompurify/node_modules/next/dist/build/index.js:15:918
    at async [my path]/nextjs-dompurify/node_modules/next/dist/build/tracer.js:3:470
npm ERR! code 1
npm ERR! path [my path]/nextjs-dompurify
npm ERR! command failed
npm ERR! command sh -c next build

npm ERR! A complete log of this run can be found in:
npm ERR!     [my path]/.npm/_logs/2021-04-30T11_28_12_323Z-debug.log

Maybe it's my local Ubuntu issue only but we can't be sure that it won't happen with other OSes too.

[NicholasEllul]

Just tested on MacOS and building succeeded for me. However, I agree we cant be sure about other environments. There seems to be a reason JSDOM makes canvas optional despite some functionality requiring it

jsdom/jsdom#2603

So if we make it mandatory, we may hit the same issues

[kkomelin]

Thanks @NicholasEllul . If adding canvas as an optional dependency to isomporphic-dompurify doesn't solve the problem and adding it as a normal dependency can potentially break things, I don't have other choices for now to just mention this issue in the documentation - that our project doesn't work for Next.js serverless setup and some other server-side environments. Unless you see any other options.

[nnduc1994]

I have a more or less similar issue while trying to use isomorphic-dompurify with AWS cdk and esbuild, got following errors
the 2 warnings something to do with esbuild, I assume

 > node_modules/jsdom/lib/jsdom/utils.js: error: Could not resolve "canvas" (mark it as external to exclude it from the bundle)
    160 │   const Canvas = require("canvas");
        ╵                          ~~~~~~~~

 > node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js: warning: Indirect calls to "require" will not be bundled (surround with a try/catch to silence this warning)
    31 │ const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;
       ╵                        ~~~~~~~

 > node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js: warning: "./xhr-sync-worker.js" should be marked as external for use with "require.resolve"
    31 │ const syncWorkerFile = require.resolve ? require.resolve("./xhr-sync-worker.js") : null;

[zhengminhui]

@nnduc1994 Hi, did you resolve this error, please?