Am getting this error while working on canvas "YouTube timestamp: 1:56:31/ 4:04:52 "

[0x86e3x4]

./node_modules/canvas/build/Release/canvas.node
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)

[giangutz]

Fixed it by adding this on my next.config.mjs file

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "liveblocks.io",
        port: "",
      },
    ],
  },
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.externals.push({ canvas: "commonjs canvas" });
    return config;
  },
};

export default nextConfig;

This config is telling Next.js to exclude canvas from the build process and load it at runtime instead.

[0x86e3x4]

The config provided produces this error: "Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node".

[rahulAgdev]

as mentioned above by @giangutz, add a webpack to configure canvas commonjs symbols in your nextjs.config.mjs.

`/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'liveblocks.io',
port: ''
}
]
},
webpack: (config) => {
// Add the Webpack externals configuration
config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' });
return config;
}
};

export default nextConfig;
`
This resolved my error.