From 7290a2c2d87e92a8be116a4f96ad0eca3c4f41fc Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 18 Mar 2024 16:09:29 +0100
Subject: [PATCH 01/15] add explicit react-dom/server alias for vite

---
 code/addons/docs/src/preset.ts                |  2 ++
 .../template/stories/docs2/ResolvedReact.mdx  |  3 +++
 .../stories/docs2/ResolvedReactVersion.jsx    |  5 ++++
 code/e2e-tests/addon-docs.spec.ts             | 24 ++++++++++++-------
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 68c7efb39f8b..8f59e5e64138 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -147,6 +147,8 @@ export const viteFinal = async (config: any, options: Options) => {
       resolve: {
         alias: {
           react,
+          // Vite doesn't respect export maps when resolving a path, so we need to do that manually here
+          'react-dom/server': `${reactDom}/server.browser.js`,
           'react-dom': reactDom,
           '@mdx-js/react': mdx,
           /**
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index 7a5f04ab6bc8..b0a889de7d08 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -1,5 +1,6 @@
 import { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
+import { version as reactDomServerVersion } from 'react-dom/server';
 import { ResolvedReactVersion } from './ResolvedReactVersion';
 
 ## In MDX
@@ -8,6 +9,8 @@ import { ResolvedReactVersion } from './ResolvedReactVersion';
 
 <code>react-dom</code>: <code data-testid="mdx-react-dom">{reactDomVersion}</code>
 
+<code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{reactDomServerVersion}</code>
+
 ## In `ResolvedReactVersion` component
 
 <ResolvedReactVersion />
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx b/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
index 6e094c1e64d0..bf83c94ea386 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
@@ -1,5 +1,6 @@
 import React, { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
+import { version as reactDomServerVersion } from 'react-dom/server';
 
 export const ResolvedReactVersion = () => {
   return (
@@ -10,6 +11,10 @@ export const ResolvedReactVersion = () => {
       <p>
         <code>react-dom</code>: <code data-testid="component-react-dom">{reactDomVersion}</code>
       </p>
+      <p>
+        <code>react-dom/server</code>:{' '}
+        <code data-testid="component-react-dom-server">{reactDomServerVersion}</code>
+      </p>
     </>
   );
 };
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index 72470acb62ab..30056ea0055c 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -189,26 +189,34 @@ test.describe('addon-docs', () => {
     await sbPage.navigateToUnattachedDocs('addons/docs/docs2', 'ResolvedReact');
     const root = sbPage.previewRoot();
 
-    let expectedReactVersion = /^18/;
+    let expectedReactVersionRange = /^18/;
     if (
       templateName.includes('preact') ||
       templateName.includes('react-webpack/17') ||
       templateName.includes('react-vite/17')
     ) {
-      expectedReactVersion = /^17/;
+      expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
-      expectedReactVersion = /^16/;
+      expectedReactVersionRange = /^16/;
     }
 
     const mdxReactVersion = await root.getByTestId('mdx-react');
     const mdxReactDomVersion = await root.getByTestId('mdx-react-dom');
+    const mdxReactDomServerVersion = await root.getByTestId('mdx-react-dom-server');
     const componentReactVersion = await root.getByTestId('component-react');
     const componentReactDomVersion = await root.getByTestId('component-react-dom');
-
-    await expect(mdxReactVersion).toHaveText(expectedReactVersion);
-    await expect(mdxReactDomVersion).toHaveText(expectedReactVersion);
-    await expect(componentReactVersion).toHaveText(expectedReactVersion);
-    await expect(componentReactDomVersion).toHaveText(expectedReactVersion);
+    const componentReactDomServerVersion = await root.getByTestId('component-react-dom-server');
+
+    // Assert that the versions are in the expected range
+    await expect(mdxReactVersion).toHaveText(expectedReactVersionRange);
+
+    const actualReactVersion = (await mdxReactVersion.textContent())!;
+    // ... then assert that the versions are all the same
+    await expect(mdxReactDomVersion).toHaveText(actualReactVersion);
+    await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
+    await expect(componentReactVersion).toHaveText(actualReactVersion);
+    await expect(componentReactDomVersion).toHaveText(actualReactVersion);
+    await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
   });
 
   test('should have stories from multiple CSF files in autodocs', async ({ page }) => {

From 8699394358d9a9bf32d0b6ccc11c1bdd2ad41fd4 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 20 Mar 2024 13:38:50 +0100
Subject: [PATCH 02/15] add stories and autodocs for resolved react in
 addon-docs templates

---
 ...lvedReactVersion.jsx => ResolvedReact.jsx} |  2 +-
 .../template/stories/docs2/ResolvedReact.mdx  | 19 +++++-
 .../stories/docs2/resolved-react.stories.ts   | 58 +++++++++++++++++++
 code/e2e-tests/addon-docs.spec.ts             | 32 +++++++++-
 code/e2e-tests/util.ts                        |  9 ++-
 5 files changed, 108 insertions(+), 12 deletions(-)
 rename code/addons/docs/template/stories/docs2/{ResolvedReactVersion.jsx => ResolvedReact.jsx} (93%)
 create mode 100644 code/addons/docs/template/stories/docs2/resolved-react.stories.ts

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
similarity index 93%
rename from code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
rename to code/addons/docs/template/stories/docs2/ResolvedReact.jsx
index bf83c94ea386..8a565da1d38c 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
@@ -2,7 +2,7 @@ import React, { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
 import { version as reactDomServerVersion } from 'react-dom/server';
 
-export const ResolvedReactVersion = () => {
+export const ResolvedReact = () => {
   return (
     <>
       <p>
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index b0a889de7d08..fcbb82da0c68 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -1,7 +1,20 @@
+import { Meta } from '@storybook/blocks';
 import { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
 import { version as reactDomServerVersion } from 'react-dom/server';
-import { ResolvedReactVersion } from './ResolvedReactVersion';
+import * as ResolvedReactStories from './resolved-react.stories';
+import { ResolvedReact } from './ResolvedReact';
+
+<Meta of={ResolvedReactStories} name="MDX"/>
+
+This doc is used to display the resolved version of React and its related packages.
+As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+
+The MDX here ensures that it works in an MDX file.
+
+- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in MDX.
+- See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+
 
 ## In MDX
 
@@ -11,6 +24,6 @@ import { ResolvedReactVersion } from './ResolvedReactVersion';
 
 <code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{reactDomServerVersion}</code>
 
-## In `ResolvedReactVersion` component
+## In `ResolvedReact` component
 
-<ResolvedReactVersion />
+<ResolvedReact />
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
new file mode 100644
index 000000000000..ec7f54a5e884
--- /dev/null
+++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -0,0 +1,58 @@
+import { within, expect } from '@storybook/test';
+import { version as reactVersion } from 'react';
+import { version as reactDomVersion } from 'react-dom';
+import { version as reactDomServerVersion } from 'react-dom/server';
+
+/**
+ * This component is used to display the resolved version of React and its related packages.
+ * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+ *
+ * The autodocs here ensures that it also works in the generated documentation.
+ *
+ * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX.
+ * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+ */
+export default {
+  title: 'Docs2/ResolvedReact',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  argTypes: {
+    content: { table: { disable: true } },
+  },
+  args: {
+    content: `
+  <p>
+  <code>react</code>: <code data-testid="react">${reactVersion}</code>
+  </p>
+  <p>
+  <code>react-dom</code>: <code data-testid="react-dom">${reactDomVersion}</code>
+  </p>
+  <p>
+  <code>react-dom/server</code>: <code data-testid="react-dom-server">${reactDomServerVersion}</code>
+  </p>
+  `,
+  },
+  parameters: {
+    docs: {
+      name: 'ResolvedReact',
+    },
+  },
+};
+
+export const Story = {
+  // This test is more or less the same as the E2E test we have for MDX and autodocs entries in addon-docs.spec.ts
+  play: async ({ canvasElement, step }: any) => {
+    const canvas = await within(canvasElement);
+
+    const actualReactVersion = (await canvas.findByTestId('react')).textContent;
+    const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent;
+    const actualReactDomServerVersion = await (
+      await canvas.findByTestId('react-dom-server')
+    ).textContent;
+
+    step('Expect React packages to all resolve to the same version', () => {
+      expect(actualReactVersion).toBe(actualReactDomVersion);
+      expect(actualReactVersion).toBe(actualReactDomServerVersion);
+    });
+  },
+};
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index 30056ea0055c..c89cc011215e 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -185,8 +185,9 @@ test.describe('addon-docs', () => {
   });
 
   test('should resolve react to the correct version', async ({ page }) => {
+    // Arrange - Navigate to MDX docs and setup expectations
     const sbPage = new SbPage(page);
-    await sbPage.navigateToUnattachedDocs('addons/docs/docs2', 'ResolvedReact');
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs');
     const root = sbPage.previewRoot();
 
     let expectedReactVersionRange = /^18/;
@@ -200,6 +201,7 @@ test.describe('addon-docs', () => {
       expectedReactVersionRange = /^16/;
     }
 
+    // Arrange - Get the actual versions
     const mdxReactVersion = await root.getByTestId('mdx-react');
     const mdxReactDomVersion = await root.getByTestId('mdx-react-dom');
     const mdxReactDomServerVersion = await root.getByTestId('mdx-react-dom-server');
@@ -207,16 +209,40 @@ test.describe('addon-docs', () => {
     const componentReactDomVersion = await root.getByTestId('component-react-dom');
     const componentReactDomServerVersion = await root.getByTestId('component-react-dom-server');
 
-    // Assert that the versions are in the expected range
+    // Assert - Tthe versions are in the expected range
     await expect(mdxReactVersion).toHaveText(expectedReactVersionRange);
 
     const actualReactVersion = (await mdxReactVersion.textContent())!;
-    // ... then assert that the versions are all the same
+    // Assert - The versions are all the same
     await expect(mdxReactDomVersion).toHaveText(actualReactVersion);
     await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
     await expect(componentReactVersion).toHaveText(actualReactVersion);
     await expect(componentReactDomVersion).toHaveText(actualReactVersion);
     await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
+
+    // Arrange - Navigate to autodocs
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'docs');
+
+    // Arrange - Get the actual versions
+    const autodocsReactVersion = await root.getByTestId('react');
+    const autodocsReactDomVersion = await root.getByTestId('react-dom');
+    const autodocsReactDomServerVersion = await root.getByTestId('react-dom-server');
+
+    await expect(autodocsReactVersion).toHaveText(actualReactVersion);
+    await expect(autodocsReactDomVersion).toHaveText(actualReactVersion);
+    await expect(autodocsReactDomServerVersion).toHaveText(actualReactVersion);
+
+    // Arrange - Navigate to story
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'story');
+
+    // Arrange - Get the actual versions
+    const storyReactVersion = await root.getByTestId('react');
+    const storyReactDomVersion = await root.getByTestId('react-dom');
+    const storyReactDomServerVersion = await root.getByTestId('react-dom-server');
+
+    await expect(storyReactVersion).toHaveText(actualReactVersion);
+    await expect(storyReactDomVersion).toHaveText(actualReactVersion);
+    await expect(storyReactDomServerVersion).toHaveText(actualReactVersion);
   });
 
   test('should have stories from multiple CSF files in autodocs', async ({ page }) => {
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index df5ca4ff59a8..f97894075f5b 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -40,7 +40,7 @@ export class SbPage {
   /**
    * Visit a story by selecting it from the sidebar.
    */
-  async navigateToStory(title: string, name: string) {
+  async navigateToStory(title: string, name: string, viewMode?: 'docs' | 'story') {
     await this.openComponent(title);
 
     const titleId = toId(title);
@@ -50,11 +50,10 @@ export class SbPage {
     const storyLink = this.page.locator('*', { has: this.page.locator(`> ${storyLinkId}`) });
     await storyLink.click({ force: true });
 
-    // assert url changes
-    const viewMode = name === 'docs' ? 'docs' : 'story';
-
     await this.page.waitForURL((url) =>
-      url.search.includes(`path=/${viewMode}/${titleId}--${storyId}`)
+      url.search.includes(
+        `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}`
+      )
     );
 
     const selected = await storyLink.getAttribute('data-selected');

From c75c98f0fa6560ed72766adfe5e45be08f407ba0 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 21 Mar 2024 08:47:02 +0100
Subject: [PATCH 03/15] account for version mismatch in react-dom

---
 .../docs/template/stories/docs2/ResolvedReact.mdx     |  1 +
 .../template/stories/docs2/resolved-react.stories.ts  |  5 ++++-
 code/e2e-tests/addon-docs.spec.ts                     | 11 ++++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index fcbb82da0c68..e044838df97d 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -15,6 +15,7 @@ The MDX here ensures that it works in an MDX file.
 - See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in MDX.
 - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
 
+**Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
 
 ## In MDX
 
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
index ec7f54a5e884..466e966a0ce6 100644
--- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
+++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -11,6 +11,8 @@ import { version as reactDomServerVersion } from 'react-dom/server';
  *
  * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX.
  * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+ *
+ * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
  */
 export default {
   title: 'Docs2/ResolvedReact',
@@ -51,7 +53,8 @@ export const Story = {
     ).textContent;
 
     step('Expect React packages to all resolve to the same version', () => {
-      expect(actualReactVersion).toBe(actualReactDomVersion);
+      // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
+      expect(actualReactDomVersion.startsWith(actualReactDomVersion)).toBeTruthy();
       expect(actualReactVersion).toBe(actualReactDomServerVersion);
     });
   },
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index c89cc011215e..ecb0cdf52686 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -209,15 +209,16 @@ test.describe('addon-docs', () => {
     const componentReactDomVersion = await root.getByTestId('component-react-dom');
     const componentReactDomServerVersion = await root.getByTestId('component-react-dom-server');
 
-    // Assert - Tthe versions are in the expected range
+    // Assert - The versions are in the expected range
     await expect(mdxReactVersion).toHaveText(expectedReactVersionRange);
 
     const actualReactVersion = (await mdxReactVersion.textContent())!;
     // Assert - The versions are all the same
-    await expect(mdxReactDomVersion).toHaveText(actualReactVersion);
+    // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
+    await expect(mdxReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
     await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
     await expect(componentReactVersion).toHaveText(actualReactVersion);
-    await expect(componentReactDomVersion).toHaveText(actualReactVersion);
+    await expect(componentReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
     await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
 
     // Arrange - Navigate to autodocs
@@ -229,7 +230,7 @@ test.describe('addon-docs', () => {
     const autodocsReactDomServerVersion = await root.getByTestId('react-dom-server');
 
     await expect(autodocsReactVersion).toHaveText(actualReactVersion);
-    await expect(autodocsReactDomVersion).toHaveText(actualReactVersion);
+    await expect(autodocsReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
     await expect(autodocsReactDomServerVersion).toHaveText(actualReactVersion);
 
     // Arrange - Navigate to story
@@ -241,7 +242,7 @@ test.describe('addon-docs', () => {
     const storyReactDomServerVersion = await root.getByTestId('react-dom-server');
 
     await expect(storyReactVersion).toHaveText(actualReactVersion);
-    await expect(storyReactDomVersion).toHaveText(actualReactVersion);
+    await expect(storyReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
     await expect(storyReactDomServerVersion).toHaveText(actualReactVersion);
   });
 

From 02b800d1c9534de7e66fdd150bbd91e98009b127 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 21 Mar 2024 08:50:25 +0100
Subject: [PATCH 04/15] typo

---
 code/addons/docs/template/stories/docs2/ResolvedReact.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index e044838df97d..1462d732ab56 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -12,7 +12,7 @@ As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should
 
 The MDX here ensures that it works in an MDX file.
 
-- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in MDX.
+- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in autodocs.
 - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
 
 **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**

From 694540aa443f96862deb064bcd933df6619e99dc Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 21 Mar 2024 14:05:25 +0100
Subject: [PATCH 05/15] fix preact aliases

---
 code/addons/docs/src/preset.ts        |  6 +++---
 code/lib/react-dom-shim/src/preset.ts |  8 +++++++-
 code/renderers/preact/src/preset.ts   | 16 ++++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 8f59e5e64138..31248e7af990 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join, isAbsolute } from 'path';
 import rehypeSlug from 'rehype-slug';
 import rehypeExternalLinks from 'rehype-external-links';
 
@@ -147,8 +147,8 @@ export const viteFinal = async (config: any, options: Options) => {
       resolve: {
         alias: {
           react,
-          // Vite doesn't respect export maps when resolving a path, so we need to do that manually here
-          'react-dom/server': `${reactDom}/server.browser.js`,
+          // Vite doesn't respect export maps when resolving an absolute path, so we need to do that manually here
+          ...(isAbsolute(reactDom) && { 'react-dom/server': `${reactDom}/server.browser.js` }),
           'react-dom': reactDom,
           '@mdx-js/react': mdx,
           /**
diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts
index 63b2889ba93b..e863a53262b6 100644
--- a/code/lib/react-dom-shim/src/preset.ts
+++ b/code/lib/react-dom-shim/src/preset.ts
@@ -1,5 +1,5 @@
 import type { Options } from '@storybook/types';
-import { join, dirname } from 'path';
+import { join, dirname, isAbsolute } from 'path';
 import { readFile } from 'fs/promises';
 
 /**
@@ -17,6 +17,12 @@ const getIsReactVersion18 = async (options: Options) => {
   const resolvedReact = await options.presets.apply<{ reactDom?: string }>('resolvedReact', {});
   const reactDom = resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json'));
 
+  if (!isAbsolute(reactDom)) {
+    // if react-dom is not resolved to a file we can't be sure if the version in package.json is correct or even if package.json exists
+    // this happens when react-dom is resolved to 'preact/compat' for example
+    return false;
+  }
+
   const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8'));
   return version.startsWith('18') || version.startsWith('0.0.0');
 };
diff --git a/code/renderers/preact/src/preset.ts b/code/renderers/preact/src/preset.ts
index 03b11e7e6097..28e5a428af0a 100644
--- a/code/renderers/preact/src/preset.ts
+++ b/code/renderers/preact/src/preset.ts
@@ -13,3 +13,19 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
     .concat([join(__dirname, 'entry-preview.mjs')])
     .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
 };
+
+/**
+ * Alias react and react-dom to preact/compat similar to the preact vite preset
+ * https://github.com/preactjs/preset-vite/blob/main/src/index.ts#L238-L239
+ */
+export const resolvedReact = async (existing: any) => {
+  try {
+    return {
+      ...existing,
+      react: 'preact/compat',
+      reactDom: 'preact/compat',
+    };
+  } catch (e) {
+    return existing;
+  }
+};

From 016f70130f7198d8e0a32e92797efe557547475c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 14:59:20 +0100
Subject: [PATCH 06/15] change preact stories extension to jsx

---
 code/renderers/preact/template/stories/{React.js => React.jsx}  | 0
 .../{react-compat.stories.js => react-compat.stories.jsx}       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename code/renderers/preact/template/stories/{React.js => React.jsx} (100%)
 rename code/renderers/preact/template/stories/{react-compat.stories.js => react-compat.stories.jsx} (96%)

diff --git a/code/renderers/preact/template/stories/React.js b/code/renderers/preact/template/stories/React.jsx
similarity index 100%
rename from code/renderers/preact/template/stories/React.js
rename to code/renderers/preact/template/stories/React.jsx
diff --git a/code/renderers/preact/template/stories/react-compat.stories.js b/code/renderers/preact/template/stories/react-compat.stories.jsx
similarity index 96%
rename from code/renderers/preact/template/stories/react-compat.stories.js
rename to code/renderers/preact/template/stories/react-compat.stories.jsx
index 33f1078d3154..b43a0650e748 100644
--- a/code/renderers/preact/template/stories/react-compat.stories.js
+++ b/code/renderers/preact/template/stories/react-compat.stories.jsx
@@ -1,4 +1,4 @@
-import { ReactFunctionalComponent, ReactClassComponent } from './React';
+import { ReactFunctionalComponent, ReactClassComponent } from './React.jsx';
 
 export default {
   component: ReactFunctionalComponent,

From e5a21d45ea401b7bbdfabbb47c2a5f694a69f384 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 15:07:00 +0100
Subject: [PATCH 07/15] add preact-render-to-string to preact sandboxes

---
 code/lib/cli/src/sandbox-templates.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index b28021be7049..99a867192932 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -423,7 +423,8 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Latest (Vite | JavaScript)',
-    script: 'npm create vite --yes {{beforeDir}} -- --template preact',
+    script:
+      'npm create vite --yes preact-server-test -- --template preact && cd preact-server-test && yarn add preact-render-to-string',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -433,7 +434,8 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Latest (Vite | TypeScript)',
-    script: 'npm create vite --yes {{beforeDir}} -- --template preact-ts',
+    script:
+      'npm create vite --yes {{beforeDir}} -- --template preact-ts && yarn add preact-render-to-string',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',

From 099671497d478dc56bb2458c8089bb56a141f94f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 15:07:42 +0100
Subject: [PATCH 08/15] temporarily reenable test-runner dev

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1cd268cbbe1b..c240ec99bd94 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -676,9 +676,9 @@ workflows:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
       # TODO: reenable once we find out the source of flakyness
-      # - test-runner-dev:
-      #     requires:
-      #       - create-sandboxes
+      - test-runner-dev:
+          requires:
+            - create-sandboxes
   merged:
     when:
       equal: [merged, << pipeline.parameters.workflow >>]

From ef42e9cd6adbb2029ad755b49370df2eb68095c7 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 15:18:17 +0100
Subject: [PATCH 09/15] add parallelism

---
 .circleci/config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index c240ec99bd94..ada82b37b1c6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -679,6 +679,7 @@ workflows:
       - test-runner-dev:
           requires:
             - create-sandboxes
+          parallelism: 8
   merged:
     when:
       equal: [merged, << pipeline.parameters.workflow >>]

From 439cc6a2c41a4bb43186efc4a4d37588b37ae181 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 15:42:39 +0100
Subject: [PATCH 10/15] disable test-runner-dev again

---
 .circleci/config.yml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ada82b37b1c6..1cd268cbbe1b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -676,10 +676,9 @@ workflows:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
       # TODO: reenable once we find out the source of flakyness
-      - test-runner-dev:
-          requires:
-            - create-sandboxes
-          parallelism: 8
+      # - test-runner-dev:
+      #     requires:
+      #       - create-sandboxes
   merged:
     when:
       equal: [merged, << pipeline.parameters.workflow >>]

From e93a31fabc5d7cb2479b3f46e31f4954a2dcb7a3 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Mar 2024 17:47:13 +0100
Subject: [PATCH 11/15] fix preact stories

---
 .../stories/docs2/resolved-react.stories.ts   | 37 +++++++++++++------
 code/lib/cli/src/sandbox-templates.ts         | 12 ++++--
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
index 466e966a0ce6..9bd0744a19b8 100644
--- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
+++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -1,7 +1,6 @@
 import { within, expect } from '@storybook/test';
 import { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
-import { version as reactDomServerVersion } from 'react-dom/server';
 
 /**
  * This component is used to display the resolved version of React and its related packages.
@@ -21,17 +20,33 @@ export default {
   argTypes: {
     content: { table: { disable: true } },
   },
+  loaders: async () => {
+    // this hack is needed because preact compat does not provide a version for react-dom/server
+    return {
+      reactDomServerVersion:
+        (await import('react-dom/server')).version ||
+        'The export does not provide a version for this renderer.',
+    };
+  },
+  decorators: (StoryFn: any, { args, loaded }: any) => {
+    return StoryFn({
+      args: {
+        ...args,
+        content: args.content.replace('{{server-version}}', loaded.reactDomServerVersion),
+      },
+    });
+  },
   args: {
     content: `
-  <p>
-  <code>react</code>: <code data-testid="react">${reactVersion}</code>
-  </p>
-  <p>
-  <code>react-dom</code>: <code data-testid="react-dom">${reactDomVersion}</code>
-  </p>
-  <p>
-  <code>react-dom/server</code>: <code data-testid="react-dom-server">${reactDomServerVersion}</code>
-  </p>
+      <p>
+        <code>react</code>: <code data-testid="react">${reactVersion}</code>
+      </p>
+      <p>
+        <code>react-dom</code>: <code data-testid="react-dom">${reactDomVersion}</code>
+      </p>
+      <p>
+        <code>react-dom/server</code>: <code data-testid="react-dom-server">{{server-version}}</code>
+      </p>
   `,
   },
   parameters: {
@@ -54,7 +69,7 @@ export const Story = {
 
     step('Expect React packages to all resolve to the same version', () => {
       // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
-      expect(actualReactDomVersion.startsWith(actualReactDomVersion)).toBeTruthy();
+      expect(actualReactDomVersion?.startsWith(actualReactDomVersion)).toBeTruthy();
       expect(actualReactVersion).toBe(actualReactDomServerVersion);
     });
   },
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 99a867192932..9d8a839bfcce 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -423,24 +423,28 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Latest (Vite | JavaScript)',
-    script:
-      'npm create vite --yes preact-server-test -- --template preact && cd preact-server-test && yarn add preact-render-to-string',
+    script: 'npm create vite --yes {{beforeDir}} -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['preact-render-to-string'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-vite/default-ts': {
     name: 'Preact Latest (Vite | TypeScript)',
-    script:
-      'npm create vite --yes {{beforeDir}} -- --template preact-ts && yarn add preact-render-to-string',
+    script: 'npm create vite --yes {{beforeDir}} -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['preact-render-to-string'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'qwik-vite/default-ts': {

From 2a38e0eeb6dabb638db4010de930cc1c67142f9a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 21 Mar 2024 22:53:59 +0100
Subject: [PATCH 12/15] support react-dom/server version not being available in
 preact

---
 .../template/stories/docs2/ResolvedReact.jsx  | 18 ++++---
 .../template/stories/docs2/ResolvedReact.mdx  | 12 ++---
 .../stories/docs2/resolved-react.stories.ts   | 48 ++++++++-----------
 code/e2e-tests/addon-docs.spec.ts             | 18 +++++--
 4 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
index 8a565da1d38c..7ef9c89215e6 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
@@ -1,19 +1,25 @@
-import React, { version as reactVersion } from 'react';
-import { version as reactDomVersion } from 'react-dom';
-import { version as reactDomServerVersion } from 'react-dom/server';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
 
 export const ResolvedReact = () => {
   return (
     <>
       <p>
-        <code>react</code>: <code data-testid="component-react">{reactVersion}</code>
+        <code>react</code>:{' '}
+        <code data-testid="component-react">{React.version ?? 'no version export found'}</code>
       </p>
       <p>
-        <code>react-dom</code>: <code data-testid="component-react-dom">{reactDomVersion}</code>
+        <code>react-dom</code>:{' '}
+        <code data-testid="component-react-dom">
+          {ReactDom.version ?? 'no version export found'}
+        </code>
       </p>
       <p>
         <code>react-dom/server</code>:{' '}
-        <code data-testid="component-react-dom-server">{reactDomServerVersion}</code>
+        <code data-testid="component-react-dom-server">
+          {ReactDomServer.version ?? 'no version export found'}
+        </code>
       </p>
     </>
   );
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index 1462d732ab56..c6ae4d10abbe 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { version as reactVersion } from 'react';
-import { version as reactDomVersion } from 'react-dom';
-import { version as reactDomServerVersion } from 'react-dom/server';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
 import * as ResolvedReactStories from './resolved-react.stories';
 import { ResolvedReact } from './ResolvedReact';
 
@@ -19,11 +19,11 @@ The MDX here ensures that it works in an MDX file.
 
 ## In MDX
 
-<code>react</code>: <code data-testid="mdx-react">{reactVersion}</code>
+<code>react</code>: <code data-testid="mdx-react">{React.version ?? 'no version export found'}</code>
 
-<code>react-dom</code>: <code data-testid="mdx-react-dom">{reactDomVersion}</code>
+<code>react-dom</code>: <code data-testid="mdx-react-dom">{ReactDom.version ?? 'no version export found'}</code>
 
-<code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{reactDomServerVersion}</code>
+<code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{ReactDomServer.version ?? 'no version export found'}</code>
 
 ## In `ResolvedReact` component
 
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
index 9bd0744a19b8..ccd8c4740afe 100644
--- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
+++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -1,6 +1,7 @@
 import { within, expect } from '@storybook/test';
-import { version as reactVersion } from 'react';
-import { version as reactDomVersion } from 'react-dom';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
 
 /**
  * This component is used to display the resolved version of React and its related packages.
@@ -20,32 +21,22 @@ export default {
   argTypes: {
     content: { table: { disable: true } },
   },
-  loaders: async () => {
-    // this hack is needed because preact compat does not provide a version for react-dom/server
-    return {
-      reactDomServerVersion:
-        (await import('react-dom/server')).version ||
-        'The export does not provide a version for this renderer.',
-    };
-  },
-  decorators: (StoryFn: any, { args, loaded }: any) => {
-    return StoryFn({
-      args: {
-        ...args,
-        content: args.content.replace('{{server-version}}', loaded.reactDomServerVersion),
-      },
-    });
-  },
   args: {
     content: `
       <p>
-        <code>react</code>: <code data-testid="react">${reactVersion}</code>
+        <code>react</code>: <code data-testid="react">${
+          React.version ?? 'no version export found'
+        }</code>
       </p>
       <p>
-        <code>react-dom</code>: <code data-testid="react-dom">${reactDomVersion}</code>
+        <code>react-dom</code>: <code data-testid="react-dom">${
+          ReactDom.version ?? 'no version export found'
+        }</code>
       </p>
       <p>
-        <code>react-dom/server</code>: <code data-testid="react-dom-server">{{server-version}}</code>
+        <code>react-dom/server</code>: <code data-testid="react-dom-server">${
+          ReactDomServer.version ?? 'no version export found'
+        }</code>
       </p>
   `,
   },
@@ -58,19 +49,22 @@ export default {
 
 export const Story = {
   // This test is more or less the same as the E2E test we have for MDX and autodocs entries in addon-docs.spec.ts
-  play: async ({ canvasElement, step }: any) => {
+  play: async ({ canvasElement, step, parameters }: any) => {
     const canvas = await within(canvasElement);
 
     const actualReactVersion = (await canvas.findByTestId('react')).textContent;
     const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent;
-    const actualReactDomServerVersion = await (
-      await canvas.findByTestId('react-dom-server')
-    ).textContent;
+    const actualReactDomServerVersion = (await canvas.findByTestId('react-dom-server')).textContent;
 
     step('Expect React packages to all resolve to the same version', () => {
       // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
-      expect(actualReactDomVersion?.startsWith(actualReactDomVersion)).toBeTruthy();
-      expect(actualReactVersion).toBe(actualReactDomServerVersion);
+      expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy();
+
+      if (parameters.renderer === 'preact') {
+        // the preact/compat alias doesn't have a version export in react-dom/server
+        return;
+      }
+      expect(actualReactDomServerVersion).toBe(actualReactVersion);
     });
   },
 };
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index ecb0cdf52686..99c58a508033 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -216,10 +216,15 @@ test.describe('addon-docs', () => {
     // Assert - The versions are all the same
     // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
     await expect(mdxReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
-    await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
+    if (!templateName.includes('preact')) {
+      // preact/compat alias doesn't have a version export in react-dom/server
+      await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
+    }
     await expect(componentReactVersion).toHaveText(actualReactVersion);
     await expect(componentReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
-    await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
+    if (!templateName.includes('preact')) {
+      await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
+    }
 
     // Arrange - Navigate to autodocs
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'docs');
@@ -231,8 +236,9 @@ test.describe('addon-docs', () => {
 
     await expect(autodocsReactVersion).toHaveText(actualReactVersion);
     await expect(autodocsReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
-    await expect(autodocsReactDomServerVersion).toHaveText(actualReactVersion);
-
+    if (!templateName.includes('preact')) {
+      await expect(autodocsReactDomServerVersion).toHaveText(actualReactVersion);
+    }
     // Arrange - Navigate to story
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'story');
 
@@ -243,7 +249,9 @@ test.describe('addon-docs', () => {
 
     await expect(storyReactVersion).toHaveText(actualReactVersion);
     await expect(storyReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
-    await expect(storyReactDomServerVersion).toHaveText(actualReactVersion);
+    if (!templateName.includes('preact')) {
+      await expect(storyReactDomServerVersion).toHaveText(actualReactVersion);
+    }
   });
 
   test('should have stories from multiple CSF files in autodocs', async ({ page }) => {

From 384aa80ca6e861bbe8280f98fcd3968e6070c5f6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 21 Mar 2024 23:25:18 +0100
Subject: [PATCH 13/15] don't define React when it is already (implicitly)
 defined in Webpack

---
 code/addons/docs/template/stories/docs2/ResolvedReact.jsx   | 6 ++++--
 code/addons/docs/template/stories/docs2/ResolvedReact.mdx   | 4 ++--
 .../docs/template/stories/docs2/resolved-react.stories.ts   | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
index 7ef9c89215e6..f16c20f04fce 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, * as ReactExport from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactDomServer from 'react-dom/server';
 
@@ -7,7 +7,9 @@ export const ResolvedReact = () => {
     <>
       <p>
         <code>react</code>:{' '}
-        <code data-testid="component-react">{React.version ?? 'no version export found'}</code>
+        <code data-testid="component-react">
+          {ReactExport.version ?? 'no version export found'}
+        </code>
       </p>
       <p>
         <code>react-dom</code>:{' '}
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index c6ae4d10abbe..391cf317060a 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import * as React from 'react';
+import * as ReactExport from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactDomServer from 'react-dom/server';
 import * as ResolvedReactStories from './resolved-react.stories';
@@ -19,7 +19,7 @@ The MDX here ensures that it works in an MDX file.
 
 ## In MDX
 
-<code>react</code>: <code data-testid="mdx-react">{React.version ?? 'no version export found'}</code>
+<code>react</code>: <code data-testid="mdx-react">{ReactExport.version ?? 'no version export found'}</code>
 
 <code>react-dom</code>: <code data-testid="mdx-react-dom">{ReactDom.version ?? 'no version export found'}</code>
 
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
index ccd8c4740afe..91f12041962b 100644
--- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
+++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -1,5 +1,5 @@
 import { within, expect } from '@storybook/test';
-import * as React from 'react';
+import * as ReactExport from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactDomServer from 'react-dom/server';
 
@@ -25,7 +25,7 @@ export default {
     content: `
       <p>
         <code>react</code>: <code data-testid="react">${
-          React.version ?? 'no version export found'
+          ReactExport.version ?? 'no version export found'
         }</code>
       </p>
       <p>

From 031f47a775e309df9a837d91628b8ca2636326b3 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 22 Mar 2024 12:41:36 +0100
Subject: [PATCH 14/15] fix resolved react mdx docs page

---
 code/addons/docs/template/stories/docs2/ResolvedReact.mdx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
index 391cf317060a..bd3ad01c2e08 100644
--- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
+++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -2,10 +2,9 @@ import { Meta } from '@storybook/blocks';
 import * as ReactExport from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactDomServer from 'react-dom/server';
-import * as ResolvedReactStories from './resolved-react.stories';
 import { ResolvedReact } from './ResolvedReact';
 
-<Meta of={ResolvedReactStories} name="MDX"/>
+<Meta title="docs2/ResolvedReact" name="MDX"/>
 
 This doc is used to display the resolved version of React and its related packages.
 As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.

From 1e5a57c1da3ff9256b81d49c9b341f783f58e9ec Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 22 Mar 2024 14:47:13 +0100
Subject: [PATCH 15/15] only assert on major versions in resolved react e2e
 test

---
 code/e2e-tests/addon-docs.spec.ts | 34 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index 99c58a508033..db7b7b7d5e05 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -185,11 +185,12 @@ test.describe('addon-docs', () => {
   });
 
   test('should resolve react to the correct version', async ({ page }) => {
-    // Arrange - Navigate to MDX docs and setup expectations
+    // Arrange - Navigate to MDX docs
     const sbPage = new SbPage(page);
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs');
     const root = sbPage.previewRoot();
 
+    // Arrange - Setup expectations
     let expectedReactVersionRange = /^18/;
     if (
       templateName.includes('preact') ||
@@ -211,19 +212,13 @@ test.describe('addon-docs', () => {
 
     // Assert - The versions are in the expected range
     await expect(mdxReactVersion).toHaveText(expectedReactVersionRange);
-
-    const actualReactVersion = (await mdxReactVersion.textContent())!;
-    // Assert - The versions are all the same
-    // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
-    await expect(mdxReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
+    await expect(componentReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(mdxReactDomVersion).toHaveText(expectedReactVersionRange);
+    await expect(componentReactDomVersion).toHaveText(expectedReactVersionRange);
     if (!templateName.includes('preact')) {
       // preact/compat alias doesn't have a version export in react-dom/server
-      await expect(mdxReactDomServerVersion).toHaveText(actualReactVersion);
-    }
-    await expect(componentReactVersion).toHaveText(actualReactVersion);
-    await expect(componentReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
-    if (!templateName.includes('preact')) {
-      await expect(componentReactDomServerVersion).toHaveText(actualReactVersion);
+      await expect(mdxReactDomServerVersion).toHaveText(expectedReactVersionRange);
+      await expect(componentReactDomServerVersion).toHaveText(expectedReactVersionRange);
     }
 
     // Arrange - Navigate to autodocs
@@ -234,11 +229,13 @@ test.describe('addon-docs', () => {
     const autodocsReactDomVersion = await root.getByTestId('react-dom');
     const autodocsReactDomServerVersion = await root.getByTestId('react-dom-server');
 
-    await expect(autodocsReactVersion).toHaveText(actualReactVersion);
-    await expect(autodocsReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
+    // Assert - The versions are in the expected range
+    await expect(autodocsReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(autodocsReactDomVersion).toHaveText(expectedReactVersionRange);
     if (!templateName.includes('preact')) {
-      await expect(autodocsReactDomServerVersion).toHaveText(actualReactVersion);
+      await expect(autodocsReactDomServerVersion).toHaveText(expectedReactVersionRange);
     }
+
     // Arrange - Navigate to story
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'story');
 
@@ -247,10 +244,11 @@ test.describe('addon-docs', () => {
     const storyReactDomVersion = await root.getByTestId('react-dom');
     const storyReactDomServerVersion = await root.getByTestId('react-dom-server');
 
-    await expect(storyReactVersion).toHaveText(actualReactVersion);
-    await expect(storyReactDomVersion).toHaveText(new RegExp(`^${actualReactVersion}`));
+    // Assert - The versions are in the expected range
+    await expect(storyReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(storyReactDomVersion).toHaveText(expectedReactVersionRange);
     if (!templateName.includes('preact')) {
-      await expect(storyReactDomServerVersion).toHaveText(actualReactVersion);
+      await expect(storyReactDomServerVersion).toHaveText(expectedReactVersionRange);
     }
   });