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

EnricoNapolitan · 2021-04-26T14:28:44Z

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.

The text was updated successfully, but these errors were encountered:

eharkins · 2021-04-28T21:06:29Z

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

kkomelin · 2021-04-29T10:05:52Z

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 · 2021-04-29T12:10:19Z

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 · 2021-04-29T16:28:02Z

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 · 2021-04-29T20:37:37Z

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

kkomelin · 2021-04-30T11:21:07Z

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 · 2021-04-30T11:31:38Z

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 · 2021-05-11T18:15:05Z

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 · 2021-05-13T08:15:15Z

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 · 2022-01-25T20:27:08Z

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 · 2022-08-02T08:19:53Z

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

DennisRosen · 2022-08-02T13:16:27Z

Just ran into this in Gatsby, any updates? Also receiving the same "Module parse failed..." error if I try to use this package with canvas installed. I'll switch to using sanitize-html for now instead.

DePasqualeOrg · 2022-09-24T17:19:49Z

I was also having this issue with SvelteKit using the Node adapter. Installing canvas solved the issue, but it would be nice if there were also a solution for serverless.

Dinkelborg · 2023-01-23T18:52:53Z

Still seeing this issue using gatsby and trying to use the isomorphic-dompurify in a template file

libbyberrie · 2023-01-27T01:21:43Z

Still seeing this issue using gatsby and trying to use the isomorphic-dompurify in a template file

Same for me here

Antonio-Laguna · 2023-02-19T10:22:47Z

Noting that this does not work (for me at least) on Next 13 not even on Serverless but normal out of the box Next app

kkomelin · 2023-02-19T12:25:29Z

@Antonio-Laguna

Noting that this does not work (for me at least) on Next 13 not even on Serverless but normal out of the box Next app

This one is new. Do you use the experimental app/ folder? Could you please give me more info?

Antonio-Laguna · 2023-02-19T18:00:04Z

@kkomelin yes that was on the experimental app/ folder using use client. It was just a quick test since I'm trying to build a library and we're leveraging that package on a component.

I'm happy to do more testing and even contribute to fixes if I know what could be going on

kkomelin · 2023-02-19T18:43:59Z

Thank you @Antonio-Laguna. I don't think there is much we can do here at the isomorhic-dompurify level because it's just a tiny wrapper around dompurify and jsdom, and the problem lays in the way jsdom communicates with canvas dependency.
But if you have any ideas how we can fix it through this package, please let me know.

Antonio-Laguna · 2023-02-19T18:47:00Z

Is this tracked at JSDOM level somehow though?

This might be extremely simplistic but shouldn't dompurify leverage the DOM instead of JSDOM which is intended to be leveraged only at Node level?

kkomelin · 2023-02-19T20:01:52Z

@Antonio-Laguna

Usually the error message looks like this:

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

What's your error message?

As for the server vs client code, modern JS frameworks flirt a lot with the server (SSR, Server Components, etc) and Next is not an exception.
Dompurify itself leverages DOM and isomorphic-dompurify utilizes JSDOM to make dompurify work on the server.

karlhorky · 2023-03-07T18:02:44Z

Solution

For usage of DOMPurify in Next.js without the wrapper package isomorphic-dompurify, here is a demo of a simple version:

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893 (comment)

Mainly the code is this (this is a Server Component - if you aren't using the app/ directory, then do the DOMPurify() call in getServerSideProps or an API Route):

import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";

export default function Home() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(
          "<img src=x onerror=alert(1)//>"
        ),
      }}
    />
  );
}

There is also some required Next.js configuration for this, to resolve the webpack bundling errors:

next.config.js

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
+ webpack: (config) => {
+   config.externals = [...config.externals, "canvas", "jsdom"];
+   return config;
+ },
};

kkomelin · 2023-03-07T18:25:54Z

Thanks @karlhorky. As I already asked here cure53/DOMPurify#400 (comment), since isomorphic-dompurify does the same under the hood as you illustrated in the code example, I guess it will work just fine with the webpack configuration you suggested. Can you test it for me?

karlhorky · 2023-03-07T19:29:44Z

Should be fine, try modifying the CodeSandbox demo to use your library instead of dompurify:

https://codesandbox.io/p/sandbox/lingering-river-j5fpi7?file=%2Fapp%2Fpage.tsx

kkomelin · 2023-03-07T20:50:13Z

Should be fine, try modifying the CodeSandbox demo to use your library instead of dompurify:
https://codesandbox.io/p/sandbox/lingering-river-j5fpi7?file=%2Fapp%2Fpage.tsx

Just confirmed. Your webpack fix works for isomorphic-dompurify as well.

Daggron · 2023-03-14T16:39:38Z

For usage of DOMPurify in Next.js without the wrapper package isomorphic-dompurify, here is a demo of a simple version:

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893 (comment)

Mainly the code is this (this is a Server Component - if you aren't using the app/ directory, then do the DOMPurify() call in getServerSideProps or an API Route):
import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";

export default function Home() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(
          "<img src=x onerror=alert(1)//>"
        ),
      }}
    />
  );
}
There is also some required Next.js configuration for this, to resolve the webpack bundling errors:

next.config.js
/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
+ webpack: (config) => {
+   config.externals = [...config.externals, "canvas", "jsdom"];
+   return config;
+ },
};

Holy Crap the next config fix worked for me 🥳

Daggron · 2023-03-14T16:49:15Z

Should be fine, try modifying the CodeSandbox demo to use your library instead of dompurify:

https://codesandbox.io/p/sandbox/lingering-river-j5fpi7?file=%2Fapp%2Fpage.tsx

@kkomelin @karlhorky Can you put more details into this why webpack changes fix this issue ?

karlhorky · 2023-03-14T17:26:56Z

Don't know too much about it, check out the details I know here:

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893 (comment)

abedshaaban · 2023-04-15T12:09:30Z

i still have this error when using react-pdf
Basic Info:

    "@types/react-pdf": "^6.2.0",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-pdf": "^6.2.2"

Error Message

./node_modules/pdfjs-dist/build/pdf.js:10759:0
Module not found: Can't resolve 'canvas'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/react-pdf/dist/cjs/entry.js
./component/PDF/index.tsx

when I add "canvas"

Failed to compile
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
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)

I still didn't update it to the next 13.3 since when I run yarn dev on windows, it crashes and throws errors

mephobic · 2023-04-26T14:17:15Z

@abedshaaban I found a way to resolve this when using react-pdf in Next Js 13 (app directory)

The best way
In your app directory, whatever/page.tsx have this

"use client"
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

In your next.config.js have this

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  future: { webpack5: true },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      config.resolve.alias.canvas = false
      config.resolve.alias.encoding = false
      return config
  }
}

module.exports = nextConfig

Let me know if it doesn't work. Happy to help out. This took me waaaay too long to figure out. Hopefully it will help someone get there faster! :)

abedshaaban · 2023-04-30T10:47:18Z

@mephobic i had a solution similar to that
webpack: (config) => { config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' }) return config

However, when I try yours, I get an error when I refresh the page with the error of Error Decoder, In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

what do you think the problem is ?

mephobic · 2023-04-30T15:34:19Z

@mephobic i had a solution similar to that webpack: (config) => { config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' }) return config

However, when I try yours, I get an error when I refresh the page with the error of Error Decoder, In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

what do you think the problem is ?

It's difficult to debug without seeing what your error is. Can you try
a. Running the code on your local and get the full error (because a local development code doesn't minify) or
b. Run this -
const nextConfig = { // ... productionBrowserSourceMaps: true, // ... };

magicink · 2023-06-14T15:15:58Z

I don't know if this is directly related as I don't deploy to a lambda, but I thought it might be worth a mention. I saw this exact same error when I upgraded from 0.18.0 to 1.6.0 on my NextJS 13 stack. I had to do two things. I had a direct dependency of DOMPurify 3.0.3. Removing that dependency entirely and downgrading to 0.18.0 resolved the issue for me.

In case it matters, my yarn.lock now references DOMPurify 2.4.x

hrc7505 · 2023-06-21T10:22:40Z

For usage of DOMPurify in Next.js without the wrapper package isomorphic-dompurify, here is a demo of a simple version:

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893 (comment)

Mainly the code is this (this is a Server Component - if you aren't using the app/ directory, then do the DOMPurify() call in getServerSideProps or an API Route):
import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";

export default function Home() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(
          "<img src=x onerror=alert(1)//>"
        ),
      }}
    />
  );
}
There is also some required Next.js configuration for this, to resolve the webpack bundling errors:

next.config.js
/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
+ webpack: (config) => {
+   config.externals = [...config.externals, "canvas", "jsdom"];
+   return config;
+ },
};

This works like a charm! Thank you @Daggron

thousight · 2023-07-31T18:58:49Z

For me, I'm working with Next.js 13 server component and this worked for me:

Server Component SVGIcon:

import { sanitize } from 'isomorphic-dompurify'

export default async function SVGIcon({
  src,
  width,
  height,
  className,
}: ISVGIcon) {
  const iconResponse = await fetch(`http://localhost:3000${src}`)
  const svgResult = await iconResponse.text()

  return svgResult ? (
    <div
      className={className}
      style={{ width: `${width}px`, height: `${height}px` }}
      dangerouslySetInnerHTML={{ __html: sanitize(svgResult) }}
      aria-hidden={true}
    />
  ) : null
}

next.config.js:

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

Just need to install both isomorphic-dompurify and jsdom, no need to worry about canvas.

miklosz · 2023-08-10T14:15:13Z

Still valid in 1.8.0

My Next.js build warns not only about missing 'canvas', but actually 3 missing deps from js-dom already
Can't resolve 'canvas'
Can't resolve 'bufferutil'
Can't resolve 'utf-8-validate'

Any luck with those fixes?

elisabeth0bangoura · 2023-09-02T04:35:13Z

It works now by only adding this in your next.config.js:

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

and then you can copy this example in your component https://konvajs.org/docs/react/Transformer.html

works fine in : "next": "^13.4.20-canary.0"

MrUsmanDev · 2024-01-25T17:52:54Z

Whats Wrong with my code its giving me error Load failed

'use client'
import React,{useEffect, useState} from 'react'
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js;

) }

export default PdfViewer

kkomelin · 2024-01-25T23:25:12Z

@MrUsmanDev why do you think it's related to this particular issue?

brandon-v-seeters · 2024-05-07T10:00:17Z

After trying out a lot of the suggested fixes (but for Nuxt instead of Next) we eventually switched to the following npm package:
sanitize-html

After installing this package and following the instructions on the link, the builds succeeded again! :)

kkomelin · 2024-05-07T10:08:43Z

Happy to hear @brandon-v-seeters. Thanks for sharing

kkomelin added the bug Something isn't working label Apr 29, 2021

eharkins mentioned this issue Jun 4, 2021

parse /groups/:groupName markdown; nextstrain/nextstrain.org#345

Merged

kkomelin mentioned this issue Nov 2, 2021

Bumping to 0.16.0 - ReferenceError: TextEncoder is not defined #91

Open

mathewjordan mentioned this issue May 27, 2022

Swap dompurify for node-friendly version. samvera-labs/nectar-iiif#9

Merged

kkomelin mentioned this issue Aug 3, 2022

Support for Node and TypeScript cure53/DOMPurify#691

Closed

hrishikesh-k mentioned this issue Sep 9, 2022

Detect if a string was filtered apostrophecms/sanitize-html#571

Closed

harrytran998 mentioned this issue Oct 14, 2022

Issue after upgrade using jsdom with optional dependencies vitejs/vite#10255

Closed

7 tasks

kkomelin mentioned this issue Dec 2, 2022

Adding a check for existence of the window object. #158

Closed

kristianjokela mentioned this issue Feb 27, 2023

Next 13 update City-of-Helsinki/events-helsinki-monorepo#237

Merged

karlhorky mentioned this issue Mar 7, 2023

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893

Closed

1 task

kkomelin mentioned this issue Jul 25, 2023

Build error when using isomorphic-dompurify in angular 15 universal #203

Open

kkomelin mentioned this issue Aug 22, 2023

Isomorphic Dompurify Remix support ? #214

Closed

bliutech mentioned this issue Sep 22, 2023

feat: Sanitize Markdown Inputs uclaacm/acmcyber.com#125

Closed

vaisajuh mentioned this issue Nov 18, 2023

Rich text editor ohtutraininghub/traininghub#166

Merged

shibatales mentioned this issue May 10, 2024

Module not found: Can't resolve 'canvas' in ...jsdom rmrk-team/rmrk-examples#3

Closed

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

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

Comments

EnricoNapolitan commented Apr 26, 2021

What's the problem

Step to reproduce

Basic Info:

eharkins commented Apr 28, 2021

kkomelin commented Apr 29, 2021 • edited Loading

NicholasEllul commented Apr 29, 2021

kkomelin commented Apr 29, 2021 • edited Loading

kkomelin commented Apr 29, 2021

kkomelin commented Apr 30, 2021 • edited Loading

kkomelin commented Apr 30, 2021 • edited Loading

NicholasEllul commented May 11, 2021

kkomelin commented May 13, 2021

nnduc1994 commented Jan 25, 2022

zhengminhui commented Aug 2, 2022

DennisRosen commented Aug 2, 2022

DePasqualeOrg commented Sep 24, 2022

Dinkelborg commented Jan 23, 2023

libbyberrie commented Jan 27, 2023

Antonio-Laguna commented Feb 19, 2023

kkomelin commented Feb 19, 2023

Antonio-Laguna commented Feb 19, 2023 • edited Loading

kkomelin commented Feb 19, 2023 • edited Loading

Antonio-Laguna commented Feb 19, 2023

kkomelin commented Feb 19, 2023

karlhorky commented Mar 7, 2023 • edited Loading

Solution

kkomelin commented Mar 7, 2023

karlhorky commented Mar 7, 2023

kkomelin commented Mar 7, 2023

Daggron commented Mar 14, 2023

Daggron commented Mar 14, 2023

karlhorky commented Mar 14, 2023

abedshaaban commented Apr 15, 2023 • edited Loading

mephobic commented Apr 26, 2023

abedshaaban commented Apr 30, 2023

mephobic commented Apr 30, 2023

magicink commented Jun 14, 2023 • edited Loading

hrc7505 commented Jun 21, 2023

thousight commented Jul 31, 2023 • edited Loading

miklosz commented Aug 10, 2023

elisabeth0bangoura commented Sep 2, 2023

MrUsmanDev commented Jan 25, 2024

kkomelin commented Jan 25, 2024

brandon-v-seeters commented May 7, 2024

kkomelin commented May 7, 2024

kkomelin commented Apr 29, 2021 •

edited

Loading

kkomelin commented Apr 29, 2021 •

edited

Loading

kkomelin commented Apr 30, 2021 •

edited

Loading

kkomelin commented Apr 30, 2021 •

edited

Loading

Antonio-Laguna commented Feb 19, 2023 •

edited

Loading

kkomelin commented Feb 19, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

abedshaaban commented Apr 15, 2023 •

edited

Loading

magicink commented Jun 14, 2023 •

edited

Loading

thousight commented Jul 31, 2023 •

edited

Loading