[BUG] Cannot find module '../build/Release/sharp-darwin-arm64v8.node' when run pnpm dev

[PerryFinn]

What happened?

I tried to initialize a new project by following the commands on the official website, but when running pnpm dev, an error was reported that prevented the project from starting properly.

Expect results: At least be able to start the project properly, which is a big blow for someone new to this framework.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

pnpm dev

> [email protected] dev /Users/goodman/Desktop/my-workspace/my-browser-extension
> plasmo dev

/Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/sharp.js:37
  throw new Error(help.join('\n'));
        ^

Error:
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-arm64v8.node'
Require stack:
- /Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/sharp.js
- /Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/constructor.js
- /Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/index.js

Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current darwin-arm64v8 runtime: "npm install --platform=darwin --arch=arm64v8 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/install
    at Object.<anonymous> (/Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/sharp.js:37:9)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/constructor.js:11:1)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)

Node.js v20.15.0
 ELIFECYCLE  Command failed with exit code 1.

(OPTIONAL) Contribution

• [ ] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[PerryFinn]

Computer Configuration Information

node -v # v20.17.0
pnpm -v # 9.9.0

Macbook Pro M2 Pro plasmo: 0.89.2

Steps:

pnpm create plasmo "my-browser-extension" --with-tailwindcss

pnpm install 

pnpm dev # error

When I follow the prompt and execute sharp separately, it has the following output:

npm install --ignore-scripts=false --foreground-scripts --verbose sharp

npm verbose cli /Users/goodman/.volta/tools/image/node/20.17.0/bin/node /Users/goodman/.volta/tools/image/node/20.17.0/bin/npm
npm info using [email protected]
npm info using [email protected]
npm verbose title npm install sharp
npm verbose argv "install" "--ignore-scripts" "false" "--foreground-scripts" "--loglevel" "verbose" "sharp"
npm verbose logfile logs-max:10 dir:/Users/goodman/.npm/_logs/2024-09-27T17_48_34_296Z-
npm verbose logfile /Users/goodman/.npm/_logs/2024-09-27T17_48_34_296Z-debug-0.log
npm http fetch GET 200 https://registry.npmmirror.com/sharp 163ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/semver 50ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-darwin-x64 59ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-darwin-arm64 93ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-arm 94ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-darwin-arm64 94ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/color 97ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-darwin-x64 97ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-arm64 99ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-s390x 54ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linux-x64 52ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linuxmusl-arm64 56ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-arm 56ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-arm64 59ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-x64 58ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linux-s390x 61ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linuxmusl-arm64 54ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/detect-libc 165ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-linuxmusl-x64 52ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-libvips-linuxmusl-x64 79ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-win32-x64 51ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-win32-ia32 57ms (cache revalidated)
npm http fetch GET 200 https://registry.npmmirror.com/@img%2fsharp-wasm32 61ms (cache revalidated)
npm verbose stack TypeError: Cannot read properties of null (reading 'name')
npm verbose stack     at Node.matches (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:1111:14)
npm verbose stack     at Link.matches (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:1117:41)
npm verbose stack     at Link.canDedupe (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:1071:15)
npm verbose stack     at PlaceDep.pruneDedupable (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:426:14)
npm verbose stack     at new PlaceDep (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:278:14)
npm verbose stack     at #buildDepStep (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:917:18)
npm verbose stack     at async Arborist.buildIdealTree (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:181:7)
npm verbose stack     at async Promise.all (index 1)
npm verbose stack     at async Arborist.reify (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:131:5)
npm verbose stack     at async Install.exec (/Users/goodman/.volta/tools/image/node/20.17.0/lib/node_modules/npm/lib/commands/install.js:150:5)
npm error Cannot read properties of null (reading 'name')
npm verbose cwd /Users/goodman/Desktop/my-workspace/my-browser-extension
npm verbose os Darwin 23.5.0
npm verbose node v20.17.0
npm verbose npm  v10.8.2
npm verbose exit 1
npm verbose code 1
npm error A complete log of this run can be found in: /Users/goodman/.npm/_logs/2024-09-27T17_48_34_296Z-debug-0.log

[PerryFinn]

I found the following possibly related issues, but they are either closed or haven't been addressed for a long time. Is this intentional?

https://github.com/PlasmoHQ/plasmo/issues/176 https://github.com/PlasmoHQ/plasmo/issues/870

[ollieLiu1988]

This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.

[qingzhoufeihu]

I had the same problem

[PerryFinn]

This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.

I resolved this issue after restarting a project using the CLI. You can try this suggestion, and if it works, I will close this issue.

[qingzhoufeihu]

This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.

I resolved this issue after restarting a project using the CLI. You can try this suggestion, and if it works, I will close this issue.

do you mean pnpm create plasmo?

[PerryFinn]

Yes, you just need to recreate a project according to the document.

Of course, I recommend solving practical problems rather than avoiding them in this way.

[qingzhoufeihu]

Yes, you just need to recreate a project according to the document.

Of course, I recommend solving practical problems rather than avoiding them in this way.

Then, why you got the sharp error at the first time?

[PerryFinn]

I also cannot accurately determine the cause, possibly due to my use of Volta for Node version management, but since Volta and pnpm are still incompatible, this situation might lead to such errors.

In my description, you can see the phenomenon where the Node version printed after pnpm execution does not match my global Node version.

[syh19]

This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.

I'm so grateful. I've solved the problem using this method.

[vantezzen]

The rebuild didn't work for me because I got this message:

The following dependencies have build scripts that were ignored: @parcel/watcher, @swc/core, esbuild, lmdb, msgpackr-extract, sharp To allow the execution of build scripts for these packages, add their names to "pnpm.onlyBuiltDependencies" in your "package.json", then run "pnpm rebuild"

Adding this to package.json:

"packageManager": "[email protected]",
  "pnpm": {
    "onlyBuiltDependencies": [
      "@parcel/watcher",
      "@swc/core",
      "esbuild",
      "lmdb",
      "msgpackr-extract",
      "sharp"
    ]
  }

and then running pnpm rebuild seems to resolve it (node 22, pnpm 10, plasmo 0.89.4)

[pythys]

I believe this is still an issue, and I tried all the solutions above and none had worked. On macos arm64 and the sharp package refuses to install on a fresh new project.

[PerryFinn]

I believe this is still an issue, and I tried all the solutions above and none had worked. On macos arm64 and the sharp package refuses to install on a fresh new project.

It might be a good idea to bring up an issue again.😄

[pippinmole]

@pythys @PerryFinn Please try to upgrade to plasmo 0.90.2 and see if that fixes your issue. We believe it was caused by an upstream issue with sharp

[pythys]

OK I think I solved by simply excluding sharp and nothing else. This is my exact code to solve in package.json:

  "pnpm": {
    "onlyBuiltDependencies": [
      "sharp"
    ]
  }

It also seems like this workaround should be in the code base instead of being applied by the developers themselves?

[pippinmole]

OK I think I solved by simply excluding sharp and nothing else. This is my exact code to solve in package.json:

  "pnpm": {
    "onlyBuiltDependencies": [
      "sharp"
    ]
  }

Running pnpm approve-builds and selecting which packages you'd like to rebuild might also help you. It will generate a similar thing to this in your package.json

[pythys]

@pippinmole I tried that command and it generated a whole bunch of useless stuff, made duplicate entries and it was a mess. I believe the above snippet is minimal and to the point.

[regaliastar]

This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.This error is caused by "sharp module doesn't have build directory". Type "pnpm rebuild [email protected] -r" in your terminal will solve this issue.

thanks very much!