next.js: Unable to load FabricJS when using appDir due to .node bindings in the library

The reason is to configure the webpack for canvas runtime error that will crash the application and utf-8-validate & bufferutil warning.

Below is the code for next.config.js to solve the issue.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reactStrictMode: false,
  webpack: (config) => {
    config.externals.push({
      "utf-8-validate": "commonjs utf-8-validate",
      bufferutil: "commonjs bufferutil",
      canvas: "commonjs canvas",
    });
    // config.infrastructureLogging = { debug: /PackFileCache/ };
    return config;
  },
};

module.exports = nextConfig;

*Solution is working for Fabric JS.

I ran into the same issue using sharp. The solution I found was to mark it as external using a custom webpack config in your next.config.js:

  webpack: (config) => {
    config.externals.push({
      sharp: 'commonjs sharp',
      canvas: 'commonjs canvas'
    })
    return config
  }

I’m moving some pages based API-routes to route handlers, the routes are using JSDom which has a peer depedency on canvas. I’m seeing the same .node bindings error:

Failed to compile.

./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)

Import trace for requested module:
./node_modules/canvas/build/Release/canvas.node
./node_modules/canvas/lib/bindings.js
./node_modules/canvas/index.js
./node_modules/jsdom/lib/jsdom/utils.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./src/scraping/dom.ts
./src/scraping/client.ts
./src/app/api/poll-post/route.ts

An interesting quirk when I migrated these pages is that with the old API-routes API, I wasn’t required to have JSDOM’s peer dependency canvas as an explicit dependency. But as soon as I moved the pages (and refactored the API to match route handlers:

Failed to compile.

./node_modules/jsdom/lib/jsdom/utils.js
Module not found: Can't resolve 'canvas'

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

Import trace for requested module:
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./src/scraping/dom.ts
./src/scraping/client.ts
./src/app/api/poll-post/route.ts

Are route handlers somehow more strict when it comes to module resolution as well?

I am getting the same error on adding the fabricjs in a fresh app router repo. Here’s the error I am getting

./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)

Can someone help

Add this in my next.config.js solve my issue;

const nextConfig = {
  reactStrictMode: false,
  webpack: (config) => {
  config.externals.push({
  sharp: "commonjs sharp",
  canvas: "commonjs canvas"
  })
  return config
  },
  }

  module.exports = nextConfig

If u are using fabric 5.3 & nextjs app router, change it to pages router, this solve the issue. If u are using fabricjs 6.0 beta, then app router & pages router are all fine. Hope this help someone.