Addon-docs: Fix react-dom/server imports breaking stories and docs

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,
           /**

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 />

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>
     </>
   );
 };

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 }) => {