From 7921dba232e9b79f4be4b6a805f6d020e61f8536 Mon Sep 17 00:00:00 2001
From: Emily Xiong <xiongemi@gmail.com>
Date: Mon, 13 Jan 2025 15:23:52 -0500
Subject: [PATCH] fix(react-native): fix react native web configuration

---
 .../web-configuration/lib/webpack-targets.ts  | 28 +++++++++++++++++--
 .../web-configuration/web-configuration.ts    | 22 ++++++++++-----
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/react-native/src/generators/web-configuration/lib/webpack-targets.ts b/packages/react-native/src/generators/web-configuration/lib/webpack-targets.ts
index 8039c708d1fa7..2c09a86c7e801 100644
--- a/packages/react-native/src/generators/web-configuration/lib/webpack-targets.ts
+++ b/packages/react-native/src/generators/web-configuration/lib/webpack-targets.ts
@@ -1,10 +1,16 @@
-import { TargetConfiguration, joinPathFragments } from '@nx/devkit';
+import {
+  TargetConfiguration,
+  Tree,
+  joinPathFragments,
+  readProjectConfiguration,
+} from '@nx/devkit';
 import type { WithReactOptions } from '@nx/react';
 import type { WithNxOptions } from '@nx/webpack';
 
 import { NormalizedSchema } from './normalize-schema';
 
 export function createBuildTarget(
+  tree: Tree,
   options: NormalizedSchema
 ): TargetConfiguration {
   return {
@@ -21,7 +27,10 @@ export function createBuildTarget(
       index: joinPathFragments(options.projectRoot, 'src/index.html'),
       baseHref: '/',
       main: joinPathFragments(options.projectRoot, `src/main-web.tsx`),
-      tsConfig: joinPathFragments(options.projectRoot, 'tsconfig.app.json'),
+      tsConfig: joinPathFragments(
+        options.projectRoot,
+        determineTsConfig(tree, options)
+      ),
       assets: [
         joinPathFragments(options.projectRoot, 'src/favicon.ico'),
         joinPathFragments(options.projectRoot, 'src/assets'),
@@ -73,6 +82,7 @@ export function createServeTarget(
 }
 
 export function createNxWebpackPluginOptions(
+  tree: Tree,
   options: NormalizedSchema
 ): WithNxOptions & WithReactOptions {
   return {
@@ -85,8 +95,20 @@ export function createNxWebpackPluginOptions(
     index: './src/index.html',
     baseHref: '/',
     main: `./src/main-web.tsx`,
-    tsConfig: './tsconfig.app.json',
+    tsConfig: determineTsConfig(tree, options),
     assets: ['./src/favicon.ico', './src/assets'],
     styles: [],
   };
 }
+
+export function determineTsConfig(tree: Tree, options: NormalizedSchema) {
+  const project = readProjectConfiguration(tree, options.project);
+
+  const appJson = joinPathFragments(project.root, 'tsconfig.app.json');
+  if (tree.exists(appJson)) return 'tsconfig.app.json';
+
+  const libJson = joinPathFragments(project.root, 'tsconfig.lib.json');
+  if (tree.exists(libJson)) return 'tsconfig.lib.json';
+
+  return 'tsconfig.json';
+}
diff --git a/packages/react-native/src/generators/web-configuration/web-configuration.ts b/packages/react-native/src/generators/web-configuration/web-configuration.ts
index 517f268a69926..d5466ddda8f22 100644
--- a/packages/react-native/src/generators/web-configuration/web-configuration.ts
+++ b/packages/react-native/src/generators/web-configuration/web-configuration.ts
@@ -57,8 +57,8 @@ export async function webConfigurationGenerator(
   }
 
   // apply webpack or vite init generator
-  const bundlerTask = await addBundlerConfiguration(tree, normalizedSchema);
-  tasks.push(bundlerTask);
+  const bundlerTasks = await addBundlerConfiguration(tree, normalizedSchema);
+  tasks.push(...bundlerTasks);
 
   // create files for webpack and vite config, index.html
   if (normalizedSchema.bundler === 'vite') {
@@ -77,7 +77,7 @@ export async function webConfigurationGenerator(
         ...normalizedSchema,
         tmpl: '',
         webpackPluginOptions: hasWebpackPlugin(tree)
-          ? createNxWebpackPluginOptions(normalizedSchema)
+          ? createNxWebpackPluginOptions(tree, normalizedSchema)
           : null,
       }
     );
@@ -110,7 +110,7 @@ export async function webConfigurationGenerator(
 async function addBundlerConfiguration(
   tree: Tree,
   normalizedSchema: NormalizedSchema
-) {
+): Promise<GeneratorCallback[]> {
   if (normalizedSchema.bundler === 'vite') {
     const { viteConfigurationGenerator } = ensurePackage<
       typeof import('@nx/vite')
@@ -125,8 +125,9 @@ async function addBundlerConfiguration(
       compiler: 'babel',
       skipFormat: true,
     });
-    return viteTask;
+    return [viteTask];
   } else {
+    let tasks: GeneratorCallback[] = [];
     const { webpackInitGenerator } = ensurePackage<
       typeof import('@nx/webpack')
     >('@nx/webpack', nxVersion);
@@ -135,6 +136,13 @@ async function addBundlerConfiguration(
       skipFormat: true,
       skipPackageJson: normalizedSchema.skipPackageJson,
     });
+    tasks.push(webpackInitTask);
+    if (!normalizedSchema.skipPackageJson) {
+      const { ensureDependencies } = await import(
+        '@nx/webpack/src/utils/ensure-dependencies'
+      );
+      tasks.push(ensureDependencies(tree, { uiFramework: 'react' }));
+    }
 
     if (!hasWebpackPlugin(tree)) {
       const projectConfiguration = readProjectConfiguration(
@@ -143,7 +151,7 @@ async function addBundlerConfiguration(
       );
       projectConfiguration.targets = {
         ...projectConfiguration.targets,
-        build: createBuildTarget(normalizedSchema),
+        build: createBuildTarget(tree, normalizedSchema),
         serve: createServeTarget(normalizedSchema),
       };
       updateProjectConfiguration(
@@ -153,7 +161,7 @@ async function addBundlerConfiguration(
       );
     }
 
-    return webpackInitTask;
+    return tasks;
   }
 }