Module parse failed: /canvas/build/Release/canvas.node Unexpected character '�'

[playground]

When build with webpack, it throws these errors.
I'm using fabric.js 1.7.3 which has a dependencies on canvas 1.6.2

SyntaxError: Unexpected character '�' (1:0) at Parser.pp$4.raise (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp$7.getTokenFromCode (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10) at Parser.pp$7.readToken (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17) at Parser.pp$7.nextToken (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15) at Parser.parse (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:515:10) at Object.parse (/test1/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39) at Parser.parse (/test1/node/ow-dig/node_modules/webpack/lib/Parser.js:902:15) at DependenciesBlock. (/test1/node/ow-dig/node_modules/webpack/lib/NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (/test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) at nextLoader (/test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) at /test1/node/ow-dig/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 at Storage.finished (/test1/node/ow-dig/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) at /test1/node/ow-dig/node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./~/canvas/lib/bindings.js 3:17-51

[LinusU]

This is because canvas.node is a natively compiled module, and isn't a javascript file. I don't see how this will be able to work with webpack...

Are you intending to run the resulting bundle with Node.js or in the browser?

[playground]

I intend to run the bundle with Node.js. @LinusU do you have a way to make it work?

[zbjornson]

@playground I hadn't heard of using webpack for node.js until now, but... I think the only way this could work is if you use the externals option to stop webpack from bundling canvas since it cannot bundle native code. There's also this plugin for webpack: https://github.com/webpack-contrib/node-loader

[jesantana]

For me providing the canvas as an external empty object worked:

externals : { canvas: {} }

In my case I am using webpack with karma to run unit test. Since canvas is not part of any test mocking it with an empty object did the trick.

[sayjeyhi]

I have this issue on gatsby SSR app, below code is not the correct way and will damage you canvas

externals : { canvas: {} }

[tobiasoberrauch]

I fixed it in this way with next 14.0.4

import './src/env.mjs';
/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.externals.push({ canvas: 'commonjs canvas' })
    return config
  },
};

export default nextConfig;

[kwb020312]

I fixed it in this way with next 14.0.4

import './src/env.mjs';
/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.externals.push({ canvas: 'commonjs canvas' })
    return config
  },
};

export default nextConfig;

You're My Hero

[vladdg-dev]

I fixed it in this way with next 14.0.4

import './src/env.mjs';
/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.externals.push({ canvas: 'commonjs canvas' })
    return config
  },
};

export default nextConfig;

This works! Thanks!

[ghost]

how to fix it in nuxtjs, thanks everyone

[vijaysolankii]

Hi Community

I am currently stuck in canvas error in next js 14.1.3 and using the "fabric": "^5.3.0",

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

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/fabric/dist/fabric.js ./lib/canvas.ts ./app/page.tsx`

can anyone help me in this Thank

[vijaysolankii]

Hi Community

I am currently stuck in canvas error in next js 14.1.3 and using the "fabric": "^5.3.0",

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

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/fabric/dist/fabric.js ./lib/canvas.ts ./app/page.tsx`

can anyone help me in this Thank

I've updated next config file but error still persist

[jaronfort]

https://dev.to/ziqinyeow/step-by-step-on-how-to-setup-fabricjs-in-the-nextjs-app-3hi3

I followed the steps here. I found this blog post. I also added use client to parts of my Next.js application to get the bug to go away.

My next.config.js file looks something like this as suggested in the article.

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

[XiiiRuth]

how to fix it in nuxtjs, thanks everyone add in nuxt.config.js

build: { extend(config) { config.externals = { 'canvas': 'commonjs canvas' }; } }

[oreographer]

I fixed it in this way with next 14.0.4

import './src/env.mjs';
/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.externals.push({ canvas: 'commonjs canvas' })
    return config
  },
};

export default nextConfig;

It works! Thankyou ❤