Next.js: Move sharp into optional deps

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",
@@ -132,6 +131,9 @@
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"
   },
+  "optionalDependencies": {
+    "sharp": "^0.33.3"
+  },
   "peerDependencies": {
     "next": "^13.5.0 || ^14.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^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) {
-  // 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)));
+let sharp: typeof import('sharp') | undefined;
+
+try {
+  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);
-    const result = await transformer.metadata();
-    width = result.width;
-    height = result.height;
+    if (sharp) {
+      const transformer = sharp(content);
+      const result = await transformer.metadata();
+      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.
+    `;
+  }
+}