From e61b63a86e6a0b29293ce6963aaa2d035390cd83 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Fri, 19 Nov 2021 08:44:29 +0100
Subject: [PATCH 1/4] Rename to `.cjs` extension so require works.

---
 lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index e46e8f484b56..e5434242e5bd 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -139,7 +139,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       const storyTemplate = await readTemplate(
         path.join(__dirname, 'virtualModuleStory.template.js')
       );
-      const storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.js`));
+      const storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
       virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { frameworkImportPath })
         // Make sure we also replace quotes for this one
         .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));

From b80d1aa4dab9d67980cf28b236cd07652177e665 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Mon, 22 Nov 2021 08:56:06 +0100
Subject: [PATCH 2/4] Review fixes.

---
 lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index e5434242e5bd..7444c01c8430 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -125,7 +125,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       const clientApi = storybookPaths['@storybook/client-api'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
-      virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(
+      virtualModuleMapping[`${configFilename}-generated-config-entry.cjs`] = interpolate(
         entryTemplate,
         {
           configFilename,
@@ -133,7 +133,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
           clientLogger,
         }
       );
-      entries.push(`${configFilename}-generated-config-entry.js`);
+      entries.push(`${configFilename}-generated-config-entry.cjs`);
     });
     if (stories.length > 0) {
       const storyTemplate = await readTemplate(

From 9390d00628585d69b417b750055c3df0fe95025a Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 24 Jan 2022 15:29:23 +1100
Subject: [PATCH 3/4] Revert "Review fixes."

This reverts commit b80d1aa4dab9d67980cf28b236cd07652177e665.
---
 lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 5de7fbc51d21..2be0ee627757 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -126,7 +126,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       const clientApi = storybookPaths['@storybook/client-api'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
-      virtualModuleMapping[`${configFilename}-generated-config-entry.cjs`] = interpolate(
+      virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(
         entryTemplate,
         {
           configFilename,
@@ -134,7 +134,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
           clientLogger,
         }
       );
-      entries.push(`${configFilename}-generated-config-entry.cjs`);
+      entries.push(`${configFilename}-generated-config-entry.js`);
     });
     if (stories.length > 0) {
       const storyTemplate = await readTemplate(

From c14edc6ad9d1d65c48705b15f8d792fe259133f2 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 24 Jan 2022 15:33:19 +1100
Subject: [PATCH 4/4] Add comments explaining discrepencies

---
 lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 2be0ee627757..90b527be6617 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -126,6 +126,8 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       const clientApi = storybookPaths['@storybook/client-api'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
+      // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
+      // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
       virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(
         entryTemplate,
         {
@@ -140,6 +142,9 @@ export default async (options: Options & Record<string, any>): Promise<Configura
       const storyTemplate = await readTemplate(
         path.join(__dirname, 'virtualModuleStory.template.js')
       );
+      // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
+      // in the user's webpack mode, which may be strict about the use of require/import.
+      // See https://github.com/storybookjs/storybook/issues/14877
       const storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
       virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { frameworkImportPath })
         // Make sure we also replace quotes for this one