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

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.

`

node.jsmsbuildelectron-forgenode-canvas


Solution 1:[1]

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.

Solution 2:[2]

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 [email protected]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mmomtchev
Solution 2

Related Questions