Merge pull request #26787 from shuta13/fix-deps-on-sharp-errors

Next.js: Move sharp into optional deps

(cherry picked from commit 9fd8c0ab66259491eb3344dcd127658bd83633d9)

code/frameworks/nextjs/package.json

@@ -114,7 +114,6 @@
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
     "semver": "^7.3.5",
-    "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
     "styled-jsx": "5.1.1",
     "ts-dedent": "^2.0.0",
@@ -146,6 +145,9 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "sharp": "^0.33.3"
+  },
   "engines": {
     "node": ">=18.0.0"
   },

code/frameworks/nextjs/src/next-image-loader-stub.ts

@@ -2,18 +2,27 @@ import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
 import type { NextConfig } from 'next';
-import sharp from 'sharp';
 import { cpus } from 'os';
+import { NextJsSharpError } from '@storybook/core-events/preview-errors';
 
 interface LoaderOptions {
   filename: string;
   nextConfig: NextConfig;
 }
 
-if (sharp.concurrency() > 1) {
+let sharp: typeof import('sharp') | undefined;
-  // Reducing concurrency reduces the memory usage too.
+
-  const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
+try {
-  sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+  sharp = require('sharp');
+  if (sharp && sharp.concurrency() > 1) {
+    // Reducing concurrency reduces the memory usage too.
+    const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
+    sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+  }
+} catch (e) {
+  console.warn(
+    'You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled.'
+  );
 }
 
 const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function NextImageLoader(
@@ -37,10 +46,14 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function N
   let height;
 
   if (extension === 'avif') {
-    const transformer = sharp(content);
+    if (sharp) {
-    const result = await transformer.metadata();
+      const transformer = sharp(content);
-    width = result.width;
+      const result = await transformer.metadata();
-    height = result.height;
+      width = result.width;
+      height = result.height;
+    } else {
+      throw new NextJsSharpError();
+    }
   } else {
     const result = imageSizeOf(this.resourcePath);
     width = result.width;

code/lib/core-events/src/errors/preview-errors.ts

@@ -27,6 +27,7 @@ export enum Category {
   RENDERER_VUE = 'RENDERER_VUE',
   RENDERER_VUE3 = 'RENDERER_VUE3',
   RENDERER_WEB_COMPONENTS = 'RENDERER_WEB-COMPONENTS',
+  FRAMEWORK_NEXTJS = 'FRAMEWORK_NEXTJS',
 }
 
 export class MissingStoryAfterHmrError extends StorybookError {
@@ -235,3 +236,19 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError
     remove access to the store entirely`;
   }
 }
+
+export class NextJsSharpError extends StorybookError {
+  readonly category = Category.FRAMEWORK_NEXTJS;
+
+  readonly code = 1;
+
+  readonly documentation = 'https://storybook.js.org/docs/get-started/nextjs#faq';
+
+  template() {
+    return dedent`
+    You are importing avif images, but you don't have sharp installed.
+
+    You have to install sharp in order to use image optimization features in Next.js.
+    `;
+  }
+}

docs/get-started/nextjs.md

@@ -865,6 +865,24 @@ You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3
 
 The `@storybook/nextjs` package abstracts the Webpack 5 builder and provides all the necessary Webpack configuration needed (and used internally) by Next.js. Webpack is currently the official builder in Next.js, and Next.js does not support Vite, therefore it is not possible to use Vite with `@storybook/nextjs`. You can use `@storybook/react-vite` framework instead, but at the cost of having a degraded experience, and we won't be able to provide you official support.
 
+### Error: You are importing avif images, but you don't have sharp installed. You have to install sharp in order to use image optimization features in Next.js.
+
+`sharp` is a dependency of Next.js's image optimization feature. If you see this error, you need to install `sharp` in your project.
+
+```bash
+npm install sharp
+```
+
+```bash
+yarn add sharp
+```
+
+```bash
+pnpm add sharp
+```
+
+You can refer to the [Install `sharp` to Use Built-In Image Optimization](https://nextjs.org/docs/messages/install-sharp) in the Next.js documentation for more information.
+
 ## API
 
 ### Parameters