Fabric.js: Error: Cannot resolve native modules such as 'canvas' using latest webpack

[kristianmandrup]

Installed via npm, using Fabric in Electron React app

When I run my app:

ERROR in ./~/fabric/dist/fabric.js
[0] Module not found: Error: Cannot resolve module 'canvas' in /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/fabric/dist
[0]  @ ./~/fabric/dist/fabric.js 804:15-32 25135:15-32 25136:14-31

Offending code: require('canvas')

    createImage: function() {
      return fabric.isLikelyNode
        ? new (require('canvas').Image)()
        : fabric.document.createElement('img');
    },

After install of _fabric_ there is no canvas module in node_modules

https://www.npmjs.com/package/canvas

https://github.com/Automattic/node-canvas/wiki/Installation---OSX

[kristianmandrup]

After solving canvas error, I get the following:

ERROR in ./~/canvas/lib/bindings.js
[0] Module not found: Error: Cannot resolve 'file' or 'directory' ../build/Release/canvas in /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/lib

with --display-error-details on

ERROR in ./~/canvas/lib/bindings.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../build/Release/canvas in /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/lib
resolve file
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas doesn't exist
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.js doesn't exist
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.jsx doesn't exist
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.json doesn't exist
resolve directory
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas doesn't exist (directory default file)
  /Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas/package.json doesn't exist (directory description file)
[/Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas]
[/Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.js]
[/Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.jsx]
[/Users/kristianmandrup/repos/electron-apps/fuse-ide/node_modules/canvas/build/Release/canvas.json]

This is caused by canvas/lib/bindings.js

module.exports = require('../build/Release/canvas');

Which references canvas in the form of canvas.node which is not compatible with Webpack

Tried to solve it like this in webpack config file https://github.com/webpack/webpack/issues/839:

I tried npm i node-loader --save

webpack.config.base

    loaders: [
      { test: /\.node$/, loader: 'node-loader' }
    ]

But npm run dev still fails trying to bind to canvas.node

I also added .node to resolve

  resolve: {
    extensions: ['', '.js', '.jsx', '.json', '.node'],

Also trying npm install --save-dev babel-preset-es2015-native-modules

[kristianmandrup]

Finally solved it by adding canvas module to externals in webpack.config.base.js

  externals: [
    'canvas'
  ],

[playground]

hi @kristianmandrup I'm getting similar issue with fabric.js in webpack

ERROR in ./~/canvas/build/Release/canvas.node
Module parse failed: /Users/ljeff/git_repo/sandbox/node/ow-dig/node_modules/canvas/build/Release/canvas.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
at Parser.pp$4.raise (/test1/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/Users/ljeff/git_repo/sandbox/node/ow-dig/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)

adding externals: ['canvas'] still gets that warning

WARNING in ./~/bindings/README.md
Module parse failed: /test1/node_modules/bindings/README.md Unexpected token (2:3)
You may need an appropriate loader to handle this file type.

[Madhivarman]

@kristianmandrup when i add externals in webpack.config.js and after run the project it shows run time error..

canvas is not defined

ReferenceError: canvas is not defined

main.js:46914
__webpack_require__()
main.js:20

main.js:146178

main.js:146007
__webpack_require__()
main.js:20

main.js:107505
__webpack_require__()

[kristianmandrup]

Perhaps try using node config object:

node: {
  canvas: 'empty'
}

This is required for all modules that are by default included by node and thus should be ignored in the resolve phase. Haven't tested it, but seen it working for several similar error cases.

[Madhivarman]

i tried but still same error..:(

[asturur]

if you are using fabric in the browser and and building with webpack under nodejs, please remove node module from your custom build. that should help.

[Madhivarman]

i am using CamanJs for image filter..i am not using fabric.. i've opened this issue
https://github.com/meltingice/CamanJS/issues/218

[asturur]

so why you ask here?

[Madhivarman]

no response there..i am stuck in this error more than two days...i am new to native applications..so its helpfull for me if i got some help here..

[asturur]

Some of your file is doing require('canvas'). Find that file and tell us wich is it.

[Madhivarman]

mm...in the file webpack.config.js should i modify that file?

[theasia-Ashish]

I solve it by adding following in webpack :
{
test: /.node$/,
use: 'node-loader',
},
resolve: {
extensions: ['.node'],
},