Upgrade image-size to 2.0

code/frameworks/nextjs/package.json

@@ -161,7 +161,7 @@
     "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
-    "image-size": "^1.0.0",
+    "image-size": "^2.0.0",
     "loader-utils": "^3.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
@@ -204,9 +204,6 @@
       "optional": true
     }
   },
-  "optionalDependencies": {
-    "sharp": "^0.33.3"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

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

@@ -1,8 +1,4 @@
-import { cpus } from 'node:os';
-
-import { NextJsSharpError } from 'storybook/internal/preview-errors';
-
-import imageSizeOf from 'image-size';
+import { imageSize } from 'image-size';
 import { interpolateName } from 'loader-utils';
 import type { NextConfig } from 'next';
 import type { RawLoaderDefinition } from 'webpack';
@@ -12,21 +8,6 @@ interface LoaderOptions {
   nextConfig: NextConfig;
 }
 
-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(
   content
 ) {
@@ -36,7 +17,6 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function N
     content,
   };
   const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), opts);
-  const extension = interpolateName(this, '[ext]', opts);
 
   this.emitFile(outputPath, content);
 
@@ -44,23 +24,7 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function N
     return `const src = '${outputPath}'; export default src;`;
   }
 
-  let width;
-  let height;
-
-  if (extension === 'avif') {
-    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;
-    height = result.height;
-  }
+  const { width, height } = imageSize(content as Uint8Array);
 
   return `export default ${JSON.stringify({
     src: outputPath,

code/yarn.lock

@@ -8047,7 +8047,7 @@ __metadata:
     babel-loader: "npm:^9.1.3"
     css-loader: "npm:^6.7.3"
     find-up: "npm:^5.0.0"
-    image-size: "npm:^1.0.0"
+    image-size: "npm:^2.0.0"
     loader-utils: "npm:^3.2.1"
     next: "npm:^15.0.3"
     node-polyfill-webpack-plugin: "npm:^2.0.1"
@@ -19547,7 +19547,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"image-size@npm:^1.0.0, image-size@npm:^1.1.1":
+"image-size@npm:^1.1.1":
   version: 1.1.1
   resolution: "image-size@npm:1.1.1"
   dependencies:
@@ -19558,6 +19558,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"image-size@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "image-size@npm:2.0.0"
+  bin:
+    image-size: bin/image-size.js
+  checksum: 10c0/c73cfc9006a5b5d500b455f5aed161eadc450a60c548becee93205d17864d18e8c442932ab1acb29bde92a177b154b3835fdf3b26eb84f881772421b6825f72e
+  languageName: node
+  linkType: hard
+
 "image-size@npm:~0.5.0":
   version: 0.5.5
   resolution: "image-size@npm:0.5.5"