Keep seeing "Can't resolve 'canvas'" when running with Next.js v13

[moshest]

 ./node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/commonjs/canvas.cjs
Module not found: Can't resolve 'canvas' in '.../webapp/node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/commonjs'

Import trace for requested module:
./node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/commonjs/canvas.cjs
./node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/esm/html/canvas-element.js
./node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/esm/shared/html-classes.js
./node_modules/.pnpm/linkedom@0.16.0/node_modules/linkedom/esm/index.js

I checked on the code, but couldn't find a way to check the package exists without triggering this warning.

[WebReflection]

have you installed canvas module in your project?

[WebReflection]

that's also a try/catch that just works https://github.com/WebReflection/linkedom/blob/main/commonjs/canvas.cjs

not sure if you are using custom transformers or something that make the code fail where it shouldn't ... it's an explicit .cjs file

[moshest]

I don't have canvas module installed, I prefer to use the shim version to reduce the bundle size.

The library works, but I keep getting those warning on the console. My guess is that Next.js bundler has it's own logger and it displayed even with the error catch block.

I tried other solutions like require.resolve() to avoid the warning with no luck. I'm sure there is a way other libraries handle it but I couldn't find anything.

[WebReflection]

My guess is that Next.js bundler has it's own logger and it displayed even with the error catch block.

so ... you like LinkeDOM approach and you have an issue with Next.js ... I think we've found the right project to file an issue then, as there's nothing actionable for me in here.

[moshest]

I manage to solve this by updating the next.config.js file:

/** @type {import('next').NextConfig} */
const config = {
  webpack: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        canvas$: false,
      },
    },
  }),
};