Installing Sharp in the Electron React Boilerplate framework resulted in an exception during packaging

[ArSrNa]

Possible install-time or require-time problem

pnpm i sharp when using electron-builder

• I have read and understood all of the documentation relating to installation.
• I have searched for known bugs relating to this problem in my choice of package manager.

You must confirm both of these before continuing.

Are you using the latest version of sharp?

• I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest,
please open an issue against that package instead.

Are you using a supported runtime?

• I am using Node.js with a version that satisfies ^18.17.0 || ^20.3.0 || >=21.0.0
• I am using Deno
• I am using Bun

If you cannot confirm any of these,
please upgrade to the latest version
and try again before opening an issue.

Are you using a supported package manager and installing optional dependencies?

• I am using npm >= 9.6.5 with --include=optional
• I am using yarn >= 3.2.0
• I am using pnpm >= 7.1.0 with --no-optional=false
• I am using Deno
• I am using Bun

If you cannot confirm any of these, please upgrade to the latest version of your chosen package manager
and ensure you are allowing the installation of optional or multi-platform dependencies before opening an issue.

What is the complete error message, including the full stack trace?

使用的electron框架是electron-react-boilerplate，在开发测试环境的时候，一切正常，但是一旦打包，就会出现这样的错误
使用编译.node包也不行，提示 sharp不是一个函数，但是打印出来sharp有很多对象

What is the complete output of running npm install --verbose --foreground-scripts sharp in an empty directory?

npm verb cli A:\nodejs\node.exe C:\Users\86138\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
npm info using npm@9.7.2
npm info using node@v20.10.0
npm verb title npm install sharp
npm verb argv "install" "--loglevel" "verbose" "--foreground-scripts" "sharp"
npm verb logfile logs-max:10 dir:C:\Users\86138\AppData\Local\npm-cache_logs\2023-12-31T17_37_34_544Z-
npm verb logfile C:\Users\86138\AppData\Local\npm-cache_logs\2023-12-31T17_37_34_544Z-debug-0.log
npm http fetch GET 200 https://registry.npmmirror.com/sharp 179ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/detect-libc 61ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-x64 128ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/color 142ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/semver 146ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-darwin-arm64 173ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-darwin-x64 176ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-darwin-x64 178ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-darwin-arm64 182ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-s390x 186ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-arm 188ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-x64 189ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-arm64 191ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linuxmusl-x64 194ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-arm 197ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-wasm32 212ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linuxmusl-x64 214ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-arm64 215ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linuxmusl-arm64 250ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-win32-ia32 250ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-win32-x64 251ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-s390x 254ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linuxmusl-arm64 340ms (cache revalidated)
npm verb stack TypeError: Cannot read properties of null (reading 'matches')
npm verb stack at Link.matches (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\node.js:1115:41)
npm verb stack at Link.canDedupe (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\node.js:1069:15)
npm verb stack at PlaceDep.pruneDedupable (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\place-dep.js:426:14)
npm verb stack at new PlaceDep (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\place-dep.js:278:14)
npm verb stack at #buildDepStep (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:933:18)
npm verb stack at async Arborist.buildIdealTree (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:196:7)
npm verb stack at async Promise.all (index 1)
npm verb stack at async Arborist.reify (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\reify.js:159:5)
npm verb stack at async Install.exec (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\lib\commands\install.js:149:5)
npm verb stack at async module.exports (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\lib\cli-entry.js:61:5)
npm verb cwd D:\ArSrNaDevelop\AI-Storyboard
npm verb Windows_NT 10.0.22621
npm verb node v20.10.0
npm verb npm v9.7.2
npm ERR! Cannot read properties of null (reading 'matches')
npm verb exit 1
npm verb unfinished npm timer reify 1704044254843
npm verb unfinished npm timer reify:loadTrees 1704044254847
npm verb unfinished npm timer idealTree:buildDeps 1704044262506
npm verb unfinished npm timer idealTree:node_modules/sharp 1704044263062
npm verb code 1

npm ERR! A complete log of this run can be found in: C:\Users\86138\AppData\Local\npm-cache_logs\2023-12-31T17_37_34_544Z-debug-0.log

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp
'envinfo' 不是内部或外部命令，也不是可运行的程序或批处理文件。

[lovell]

Did you try asarUnpack? Please see #678 (comment)

npm verb stack TypeError: Cannot read properties of null (reading 'matches')
npm verb stack at Link.matches (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\node.js:1115:41)

You might also be suffering from npm/cli#4367

[lovell]

I've added an Electron section to the docs with info about asarUnpack as there have been a few questions relating to this recently - see commit 8cd8326

[ArSrNa]

Did you try asarUnpack? Please see #678 (comment)

npm verb stack TypeError: Cannot read properties of null (reading 'matches')
npm verb stack at Link.matches (C:\Users\86138\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\node.js:1115:41)

You might also be suffering from npm/cli#4367

After adding to the asarUnpack parameter, the same error message still appears

[lovell]

Please ensure both sharp and the @img/ scoped packages are unpacked.

sharp/docs/install.md

Lines 234 to 250 in 9bcf399

	### electron
	Ensure `sharp` is unpacked from the ASAR archive file using the
	[asarUnpack](https://www.electron.build/configuration/configuration.html)
	option.
	```json
	{
	"build": {
	"asar": true,
	"asarUnpack": [
	"**/node_modules/sharp/**/*",
	"**/node_modules/@img/**/*"
	]
	}
	}
	```

[ArSrNa]

not works

I've used asarmor to protect app.asar file. I don't know if this is the reason

const asarmor = require('asarmor');
const { join } = require("path");

exports.default = async ({ appOutDir, packager }) => {
  try {
    const asarPath = join(packager.getResourcesDir(appOutDir), 'app.asar');
    console.log(`asarmor applying patches to ${asarPath}`);
    const archive = await asarmor.open(asarPath);
    archive.patch(); // apply default patches
    await archive.write(asarPath);
  } catch (err) {
    console.error(err);
  }
};

[ArSrNa]

The issue with asamor has been resolved, and adding or not will result in an error message

[lovell]

You'll probably need to ask at the https://github.com/sleeyax/asarmor repo as I don't know anything about it.

[ArSrNa]

Without using asarmor the same error also occured.

[lovell]

If you still require help, the best thing to do is create a complete, minimal repo that allows someone else to reproduce.

[ArSrNa]

https://github.com/ArSrNa/sharp-electron-test

[lovell]

Thank you, from a quick scan a few things stand out:

• Webpack is involved but externals doesn't appear to have been configured - please see https://sharp.pixelplumbing.com/install#webpack
• pnpm is involved but supportedArchitectures doesn't appear to have been configured - please see https://sharp.pixelplumbing.com/install#cross-platform
• There are two package.json files - please see https://electron-react-boilerplate.js.org/docs/adding-dependencies/#which-packagejson-file-to-use

[ArSrNa]

errors still occured
ArSrNa/sharp-electron-test@567bbce

[lovell]

https://electron-react-boilerplate.js.org/docs/adding-dependencies/#which-packagejson-file-to-use suggests sharp needs to be added to dependencies of your release/app/package.json file.

In addition, some of the scripts are calling npm run... directly, which means your pnpm configuration might be ignored.

[ArSrNa]

Move sharp to 'release/app/package. json' and after reinstalling with NPM, Sharp can now run successfully. Thank you for your answer.