how can I use node-canvas in electronjs-17 on windows?

Question

I've installed all essentials for my windows to build application with electronjs.

versions:

node -v v17.5.0
npm -v 8.4.1

> My dependencies

  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "extract-zip": "^2.0.1",
    "nan": "^2.15.0",
    "node-canvas": "^2.9.0",
    "node-pre-gyp": "^0.17.0",
    "sha1": "^1.1.1"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.63",
    "@electron-forge/maker-deb": "^6.0.0-beta.63",
    "@electron-forge/maker-rpm": "^6.0.0-beta.63",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
    "@electron-forge/maker-zip": "^6.0.0-beta.63",
    "electron": "17.0.0",
    "electron-rebuild": "^3.2.7"
  }

`

Errors

Creating library D:\test-app-latest\node_modules\node-canvas\build\Release\canvas.lib and object D:\test-app-latest\node_modules\node-canvas\build\Release\canvas.expCanvas.obj : error LNK2019: unresolved external symbol "__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingStore(void)" (_imp?GetBackingStore@Arr ayBuffer@v8@@QEAA?AV?$shared_ptr@VBackingStore@v8@@@std@@XZ) referenced in function "void __cdecl parsePNGArgs(class v8::Local,struct PngClosure &)" (?parsePNGArgs@@YAXV?$Local@VValue@v8@@@v 8@@AEAUPngClosure@@@Z) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: unresolved external symbol "__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingStore(void)" (_imp?G ptr@VBackingStore@v8@@@std@@XZ) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] ⠋ Preparing native dependencies: 0 / 1ImageData.obj : error LNK2001: unresolved external symbol "__declspec(dllimport) public: class std::shared_ptr __cdecl v8::ArrayBuffer::GetBackingArrayBuffer@v8@@QEAA?AV?$shared_ptr@VBackingStore@v8@@@std@@XZ) [D:\test-app-latest\node_modules\node-canvas\build\canvas.vcxproj] ✖ Preparing native dependencies: 0 / 1

An unhandled error has occurred inside Forge: node-gyp failed to rebuild 'D:\test-app-latest\node_modules\node-canvas'. For more information, rerun with the DEBUG environment variable set to "electron-rebuild".

Error: C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\MSBuild\Current\Bin\MSBuild.exe failed with exit code: 1

Error: node-gyp failed to rebuild 'D:\test-app-latest\node_modules\node-canvas'. For more information, rerun with the DEBUG environment variable set to "electron-rebuild".

Error: C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\MSBuild\Current\Bin\MSBuild.exe failed with exit code: 1

at NodeGyp.rebuildModule (D:\test-app-latest\node_modules\electron-rebuild\src\module-type\node-gyp.ts:129:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at ModuleRebuilder.rebuildNodeGypModule (D:\test-app-latest\node_modules\electron-rebuild\src\module-rebuilder.ts:93:5)
at ModuleRebuilder.rebuild (D:\test-app-latest\node_modules\electron-rebuild\src\module-rebuilder.ts:129:8)
at Rebuilder.rebuildModuleAt (D:\test-app-latest\node_modules\electron-rebuild\src\rebuild.ts:203:9)
at Rebuilder.rebuild (D:\test-app-latest\node_modules\electron-rebuild\src\rebuild.ts:158:9)
at D:\test-app-latest\node_modules\@electron-forge\core\src\util\rebuild.ts:38:5

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

`

score 0 · Answer 1 · answered Mar 11 '22 at 10:48

You can't at the moment, look at this: https://github.com/electron/electron/issues/29893

The Electron project has made the decision to switch to clang/libc++ for their Windows builds. The MSVC STL and libc++ are not compatible when it comes to the implementation of std::shared_ptr - which means that all object files that are meant to be linked together have to use the same runtime.

And currently node-gyp does not support clang on Windows.

Which means that many native Node.js addons are left out in the cold.

justyourimage · Answer 2 · 2022-04-24T10:49:00.187

The workaround (as of 22/04/24 - Electron 18) is to stick to the last Electron 12 release that's still using the old build environment/API-Combination on Windows for native dependencies like canvas:

yarn add --dev electron@12.X.X

Specifically for node-canvas:

If you're using electron-builder disable rebuilding of native dependencies via config and switch to electron-rebuild which works properly.

electron-builder doesn't work with node-canvas properly in that combination with Electron 12 (or at all). Whatever ...

It works with Electron 12 and electron-rebuild.

Theoretically from how I understand it might be possible that either one the API or the dependencies become compatible but that's already a few majors in and nothing happened yet.

So check back later if that's still needed.

Does anyone know if there has been any update to this? Is using Electron 12 still the only option to use node-canvas? If so, what a shame! — Murf, Nov 11 '22 at 18:02

how can I use node-canvas in electronjs-17 on windows?

2 Answers2