From a7cbe9907f868647f0c8b42a6c98f27349e1a636 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 13 Dec 2023 13:41:01 +0100
Subject: [PATCH] Prevent Stories lookup in node_modules

---
 .../src/preview/iframe-webpack.config.ts       |  1 +
 code/lib/core-webpack/src/to-importFn.ts       | 18 +++++++++++++++++-
 code/lib/csf-plugin/src/index.ts               |  3 ++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index ac573827715a..c31238b5c5e5 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -218,6 +218,7 @@ export default async (
       rules: [
         {
           test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
+          exclude: /node_modules/,
           enforce: 'post',
           use: [
             {
diff --git a/code/lib/core-webpack/src/to-importFn.ts b/code/lib/core-webpack/src/to-importFn.ts
index 20c3be9dc1c2..83455c66cb6b 100644
--- a/code/lib/core-webpack/src/to-importFn.ts
+++ b/code/lib/core-webpack/src/to-importFn.ts
@@ -4,6 +4,20 @@ import { globToRegexp } from '@storybook/core-common';
 
 import { importPipeline } from './importPipeline';
 
+function adjustRegexToExcludeNodeModules(originalRegex: RegExp) {
+  const originalRegexString = originalRegex.source;
+  const startsWithCaret = originalRegexString.startsWith('^');
+  const excludeNodeModulesPattern = startsWithCaret ? '(?!.*node_modules)' : '^(?!.*node_modules)';
+
+  // Combine the new exclusion pattern with the original regex
+  const adjustedRegexString = startsWithCaret
+    ? `^${excludeNodeModulesPattern}${originalRegexString.substring(1)}`
+    : excludeNodeModulesPattern + originalRegexString;
+
+  // Create and return the new regex
+  return new RegExp(adjustedRegexString);
+}
+
 export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) {
   const { directory, files } = specifier;
 
@@ -17,7 +31,9 @@ export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) {
   const webpackIncludeGlob = ['.', '..'].includes(directory)
     ? files
     : `${directoryWithoutLeadingDots}/${files}`;
-  const webpackIncludeRegexpWithCaret = globToRegexp(webpackIncludeGlob);
+  const webpackIncludeRegexpWithCaret = webpackIncludeGlob.includes('node_modules')
+    ? globToRegexp(webpackIncludeGlob)
+    : adjustRegexToExcludeNodeModules(globToRegexp(webpackIncludeGlob));
   // picomatch is creating an exact match, but we are only matching the end of the filename
   return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, ''));
 }
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index ec0aaa1d52a9..6cc9cfcd594b 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -5,7 +5,8 @@ import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
 export type CsfPluginOptions = EnrichCsfOptions;
 
-const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/;
+// Ignore node_modules
+const STORIES_REGEX = /(?<!node_modules.*)\.(story|stories)\.[tj]sx?$/;
 
 const logger = console;