BUG: Cannot find module '../build/Release/sharp.node'

[dr3s]

Describe the bug:
event - compiled successfully
Error:
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp.node'
Require stack:

• /home/projects/nextjs-qta6vo/node_modules/sharp/lib/constructor.js

• /home/projects/nextjs-qta6vo/node_modules/sharp/lib/index.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/next-server/server/image-optimizer.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/next-server/server/next-server.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/server/next.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/server/lib/start-server.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/cli/next-dev.js

• /home/projects/nextjs-qta6vo/node_modules/next/dist/bin/next

• Run "npm rebuild --verbose sharp" and look for errors

• Consult the installation documentation at https://sharp.pixelplumbing.com/install

• Search for this error at https://github.com/lovell/sharp/issues

  at Object.eval (/home/projects/nextjs-qta6vo/node_modules/sharp/lib/constructor.js:34:9)

Link to the blitz that caused the error
https://stackblitz.com/edit/nextjs-qta6vo?file=package.json

Steps to reproduce:
Following nextjs tutorial and failed on this step https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

Version of webcontainer:
Hash: cb1eb6b301af424e8dffb694972509f06ea6b5db

Desktop (please complete the following information):
Browser name = Chrome
Full version = 91.0.4472.77
Major version = 91
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37
performance.memory = {
"totalJSHeapSize": 66418436,
"usedJSHeapSize": 62086364,
"jsHeapSizeLimit": 4294705152
}

[dr3s]

To fix another issue around postcss-scss not working, I did run rm -Rf node_modules/ at some point :-(

[SamVerschueren]

The thing here is that Sharp for instance is a native binary. We can’t magically get in native binaries in the browser unfortunately. For that we need a WASM compiled equivalent. I did thought we already have one though.

@d3lm you probably know more about this?

[d3lm]

Yes, we have a polyfill for sharp but it's not yet published. We are working on it!

[benmccann]

@d3lm is there an issue I should follow to track progress on the polyfill for sharp? I'd like to enable image optimization as a default part of SvelteKit, but it would currently break https://sveltekit.new/

[d3lm]

We are trying to figure out the best strategy for sharp at the moment. Maybe for the time being you can use Squoosh or ImageScript? May be a little slower than sharp but both work in WebContainer as they are compiled to WASM.

[benmccann]

Yeah, we'd considered Squoosh, but it's 17x slower: https://sharp.pixelplumbing.com/performance

Another thought was to add an option so that you can use Sharp on most platforms, but Squoosh in web containers. It'd add a lot of complexity though. We might just end up disabling image optimization in web containers as a simpler fix.

[d3lm]

Yea, maybe disabling it for the time being is a good idea. I ll keep you updated when we made progress on sharp. If you want you can use @webcontainer/env which exports a function isWebContainer() which you can use to check if you're running inside WebContainer.

[benmccann]

Squoosh is no longer maintained, so I guess that option's off the table. https://www.npmjs.com/package/@squoosh/lib

[d3lm]

Quick update, we are working on sharp Wasm and we'll post an update once it's published.

[RReverser]

I think this can be closed now :) https://blog.stackblitz.com/posts/bringing-sharp-to-wasm-and-webcontainers/

[d3lm]

Yes correct. I am going to close this. You need to use sharp >=0.31.3. For Next.js, if it depends on sharp I suggest to upgrade to a newer version, unless they use a bundled dependency in which case it needs to be handled by Next.js to use the Wasm version if the native addon fails similar to what they do for SWC.

[styfle]

it needs to be handled by Next.js to use the Wasm version if the native addon fails similar to what they do for SWC.

Unfortunately, the wasm sharp mentioned in the blog post is not published to npm. So Next.js, Sveltekit, etc can't add it as a dependency.

lovell/sharp#3522 (comment)

[RReverser]

This issue was specifically about usage in WebContainers (since this is WebContainer repo). Inside WebContainers, you can use normal sharp dependency in package.json or install manually via npm i sharp and it will be polyfilled with Wasm port behind the scenes, so Next.js projects and others will "just work".