Merge pull request #32957 from storybookjs/yann/handle-svgr-use-cases

Nextjs Vite: Update internal plugin to support `svgr` use cases

(cherry picked from commit 7f51296)

Author: yannbf

code/frameworks/nextjs-vite/package.json

@@ -83,7 +83,7 @@
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",
     "styled-jsx": "5.1.6",
-    "vite-plugin-storybook-nextjs": "^3.0.0"
+    "vite-plugin-storybook-nextjs": "^3.1.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

code/frameworks/nextjs-vite/src/preset.ts

@@ -68,10 +68,16 @@ export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, option
     await normalizePostCssConfig(searchPath);
   }
 
-  const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
+  const { nextConfigPath, image = {} } =
+    await options.presets.apply<FrameworkOptions>('frameworkOptions');
 
   const nextDir = nextConfigPath ? dirname(nextConfigPath) : undefined;
 
+  const vitePluginOptions = {
+    image,
+    dir: nextDir,
+  };
+
   return {
     ...reactConfig,
     resolve: {
@@ -83,6 +89,6 @@ export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, option
         'styled-jsx/style.js': fileURLToPath(import.meta.resolve('styled-jsx/style')),
       },
     },
-    plugins: [...(reactConfig?.plugins ?? []), vitePluginStorybookNextjs({ dir: nextDir })],
+    plugins: [...(reactConfig?.plugins ?? []), vitePluginStorybookNextjs(vitePluginOptions)],
   };
 };

code/frameworks/nextjs-vite/src/types.ts

@@ -11,6 +11,10 @@ type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 export type FrameworkOptions = {
   /** The path to the Next.js configuration file. */
   nextConfigPath?: string;
+  image?: {
+    includeFiles?: string[];
+    excludeFiles?: string[];
+  };
   builder?: BuilderOptions;
 };
 

code/yarn.lock

@@ -6553,7 +6553,7 @@ __metadata:
     semver: "npm:^7.3.5"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.8.3"
-    vite-plugin-storybook-nextjs: "npm:^3.0.0"
+    vite-plugin-storybook-nextjs: "npm:^3.1.0"
   peerDependencies:
     next: ^14.1.0 || ^15.0.0 || ^16.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -26391,9 +26391,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "vite-plugin-storybook-nextjs@npm:3.0.0"
+"vite-plugin-storybook-nextjs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "vite-plugin-storybook-nextjs@npm:3.1.0"
   dependencies:
     "@next/env": "npm:16.0.0"
     image-size: "npm:^2.0.0"
@@ -26405,7 +26405,7 @@ __metadata:
     next: ^14.1.0 || ^15.0.0 || ^16.0.0
     storybook: ^0.0.0-0 || ^9.0.0 || ^10.0.0 || ^10.0.0-0
     vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-  checksum: 10c0/bb460ddab4d46a98bdd1525c7f18117a0a335a3500243534955532b5a209d3e63aad369a96a669618dd13b785cabe74560b4439ce063c953c51b9ab44abb7b10
+  checksum: 10c0/a3c87a91eca84bda3b96eb8d66afa654542ed1ee3dbd3ec1a43dace4b53611e552a44d7ba8436888e965dbc6f099ddfa9c4ab91f691a19357ddc2f2cc940f9c5
   languageName: node
   linkType: hard