fix(react): ensure @vitejs/plugin-react is installed for storybook (#27463)

packages/react/src/generators/storybook-configuration/configuration.ts

@@ -1,14 +1,17 @@
 import { StorybookConfigureSchema } from './schema';
 import storiesGenerator from '../stories/stories';
 import {
+  addDependenciesToPackageJson,
   ensurePackage,
   formatFiles,
+  type GeneratorCallback,
   joinPathFragments,
   readNxJson,
   readProjectConfiguration,
+  runTasksInSerial,
   Tree,
 } from '@nx/devkit';
-import { nxVersion } from '../../utils/versions';
+import { nxVersion, reactViteVersion } from '../../utils/versions';
 
 async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
   // TODO(katerina): Nx 19 -> remove Cypress
@@ -48,6 +51,7 @@ export async function storybookConfigurationGeneratorInternal(
   host: Tree,
   schema: StorybookConfigureSchema
 ) {
+  const tasks: GeneratorCallback[] = [];
   const nxJson = readNxJson(host);
   const addPluginDefault =
     process.env.NX_ADD_PLUGINS !== 'false' &&
@@ -69,6 +73,16 @@ export async function storybookConfigurationGeneratorInternal(
     uiFramework = '@storybook/react-webpack5';
   }
 
+  if (uiFramework === '@storybook/react-vite') {
+    tasks.push(
+      addDependenciesToPackageJson(
+        host,
+        {},
+        { '@vitejs/plugin-react': reactViteVersion }
+      )
+    );
+  }
+
   const installTask = await configurationGenerator(host, {
     project: schema.project,
     configureCypress: schema.configureCypress,
@@ -83,13 +97,15 @@ export async function storybookConfigurationGeneratorInternal(
     addPlugin: schema.addPlugin,
   });
 
+  tasks.push(installTask);
+
   if (schema.generateStories) {
     await generateStories(host, schema);
   }
 
   await formatFiles(host);
 
-  return installTask;
+  return runTasksInSerial(...tasks);
 }
 
 export default storybookConfigurationGenerator;

packages/react/src/utils/versions.ts

@@ -11,6 +11,7 @@ export const babelLoaderVersion = '^9.1.2';
 export const typesReactVersion = '18.3.1';
 export const typesReactDomVersion = '18.3.0';
 export const typesReactIsVersion = '18.3.0';
+export const reactViteVersion = '^4.2.0';
 
 export const typesNodeVersion = '18.16.9';