From 60752e640fe64e29ea8d3896410fb526fb7120f4 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Sat, 8 Jul 2023 09:14:13 +0200
Subject: [PATCH] Merge pull request #23210 from daves28/patch-1

Next.js: Resolving compilation issues when using @nx/react/plugin/storybook with stories that contain SVGs

(cherry picked from commit 8704b3623ddd889af61d8fbd957e5b903173e8eb)
---
 code/frameworks/nextjs/src/images/webpack.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/nextjs/src/images/webpack.ts b/code/frameworks/nextjs/src/images/webpack.ts
index 51064d40cc8a..6f1f24208563 100644
--- a/code/frameworks/nextjs/src/images/webpack.ts
+++ b/code/frameworks/nextjs/src/images/webpack.ts
@@ -9,6 +9,8 @@ export const configureImages = (baseConfig: WebpackConfig, nextConfig: NextConfi
   configureImageDefaults(baseConfig);
 };
 
+const fallbackFilename = 'static/media/[path][name][ext]';
+
 const configureImageDefaults = (baseConfig: WebpackConfig): void => {
   const version = getNextjsVersion();
   const resolve = baseConfig.resolve ?? {};
@@ -58,7 +60,7 @@ const configureStaticImageImport = (baseConfig: WebpackConfig, nextConfig: NextC
       {
         loader: require.resolve('@storybook/nextjs/next-image-loader-stub.js'),
         options: {
-          filename: assetRule.generator?.filename,
+          filename: assetRule.generator?.filename ?? fallbackFilename,
           nextConfig,
         },
       },
@@ -69,7 +71,7 @@ const configureStaticImageImport = (baseConfig: WebpackConfig, nextConfig: NextC
     issuer: /\.(css|scss|sass)$/,
     type: 'asset/resource',
     generator: {
-      filename: assetRule.generator?.filename,
+      filename: assetRule.generator?.filename ?? fallbackFilename,
     },
   });
 };