[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

> my-browser-extension@0.0.1 dev /Users/goodman/Desktop/my-workspace/my-browser-extension
> plasmo dev

/Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/sharp@0.32.6/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/sharp@0.32.6/node_modules/sharp/lib/sharp.js
- /Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/constructor.js
- /Users/goodman/Desktop/my-workspace/my-browser-extension/node_modules/.pnpm/sharp@0.32.6/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/sharp@0.32.6/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/sharp@0.32.6/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 npm@10.8.2
npm info using node@v20.17.0
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 sharp@0.32.6 -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 sharp@0.32.6 -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 sharp@0.32.6 -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 sharp@0.32.6 -r" in your terminal will solve this issue.

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