[Bug]: Dependency on sharp in @storybook/nextjs should be optional

[matmannion]

Describe the bug

As of 7.6.0 @nextjs/storybook has a direct dependency on sharp, in order to handle AVIF processing. This is an optional dependency in nextjs itself so presents an issue for anyone (like us) who are running Storybook inside of a tightly constrainted CI environment - we have no need for AVIF or Next.js's image optimisation, so we don't need the sharp dependency and don't want to whitelist the download domains in order for it to download binaries at install time.

It would be better for this to be an optional dependency, and to throw an error if an AVIF file is detected - this would match Next's own behaviour (https://nextjs.org/docs/messages/install-sharp)

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.asdf/installs/nodejs/20.10.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm <----- active
  Browsers:
    Chrome: 119.0.6045.199
    Edge: 119.0.2151.97
    Safari: 17.1
  npmPackages:
    @storybook/addon-actions: 7.6.3 => 7.6.3
    @storybook/addon-essentials: 7.6.3 => 7.6.3
    @storybook/addon-interactions: 7.6.3 => 7.6.3
    @storybook/addon-links: 7.6.3 => 7.6.3
    @storybook/blocks: 7.6.3 => 7.6.3
    @storybook/nextjs: 7.6.3 => 7.6.3
    @storybook/react: 7.6.3 => 7.6.3
    @storybook/testing-library: 0.2.2 => 0.2.2
    chromatic: 9.1.0 => 9.1.0
    eslint-plugin-storybook: 0.6.15 => 0.6.15
    storybook: 7.6.3 => 7.6.3

Additional context

No response

[matmannion]

As a somewhat undesirable workaround for this, we're currently using the overrides field in package.json to redirect the dependency to a stub package:

  "overrides": {
    "@storybook/nextjs": {
      "sharp": "npm:dry-uninstall"
    }
  }

[LifeAsDev]

How I can reproduce this issue?

[shilman]

@matmannion Any interest in contributing a PR to solve this? We've documented how to contribute and there's also a #contributing channel on the Storybook discord if you have questions.

[raydot]

@LifeAsDev I'm having the exact same problem. npx storybook@latest init fails to install. npm ERR! sharp: Installation error: unable to get local issuer certificate, which is why I'm assuming @matmannion mentions whitelisting.

[LifeAsDev]

@raydot To reproduce this error I need a macOs that I don't have, can you solve it?

[raydot]

@LifeAsDev I should have mentioned my specs: I'm working in Windows 10 Enterprise. I think the key problem, though, is that @matmannion and I are both working in secure environments that have things like whitelists and proxies between us and the web.

In my case, the issue was solved by adding an .npmrc that allowed me to connect to our internal node registries securely. @matmannion is taking it a step further in suggesting the the install be optional for people who can't do that.

[jesse-mm]

I had a same kind of issue ? Might need to open a new ticket for it but installing with npm install and ignore-scripts set to true will fail installing the sharp binaries.

I've resolved the issue by running:
cd node_modules/@storybook/nextjs/node_modules/sharp and running npm rebuild --ignore-scripts=false afterwards.

The sharp binaries are then available in the build folder.

[2manoj1]

when try #25075 (comment) storybook stuck in loading state.

Any workaround sharp not installing after proxy setup.

Nodejs 20.10 LTS version using, npm 10+