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.