Merge pull request #25214 from storybookjs/valentin/fix-monorepo-stor…

…ies-lookup Core: Prevent stories lookup in node_modules
storybookjs · Jan 11, 2024 · 91f1bb8 · 91f1bb8
2 parents 1086e75 + 569175b
commit 91f1bb8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 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
@@ -215,6 +215,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
@@ -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
@@ -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;