fix(react): add bundler to create-nx-workspace react preset so webpac…

…k package is installed
nrwl · Jan 23, 2023 · 0ab8ad5 · 0ab8ad5
1 parent c6adec7
commit 0ab8ad5
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/e2e/workspace-create/src/create-nx-workspace.test.ts b/e2e/workspace-create/src/create-nx-workspace.test.ts
@@ -7,6 +7,7 @@ import {
   expectNoTsJestInJestConfig,
   getSelectedPackageManager,
   packageManagerLockFile,
+  readJson,
   runCreateWorkspace,
   uniq,
 } from '@nrwl/e2e/utils';
@@ -126,10 +127,13 @@ describe('create-nx-workspace', () => {
       style: 'css',
       appName,
       packageManager,
+      bundler: 'webpack',
     });
 
     expectNoAngularDevkit();
     expectNoTsJestInJestConfig(appName);
+    const packageJson = readJson('package.json');
+    expect(packageJson.devDependencies['@nrwl/webpack']).toBeDefined();
   });
 
   it('should be able to create an next workspace', () => {

diff --git a/packages/cra-to-nx/src/lib/cra-to-nx.ts b/packages/cra-to-nx/src/lib/cra-to-nx.ts
@@ -183,9 +183,11 @@ function createTempWorkspace(options: NormalizedOptions) {
       options.npxYesFlagNeeded ? '-y' : ''
     } create-nx-workspace@latest temp-workspace --appName=${
       options.reactAppName
-    } --preset=react-monorepo --style=css --packageManager=${
-      options.packageManager
-    } ${options.nxCloud ? '--nxCloud' : '--nxCloud=false'}`,
+    } --preset=react-monorepo --style=css --bundler=${
+      options.isVite ? 'vite' : 'webpack'
+    } --packageManager=${options.packageManager} ${
+      options.nxCloud ? '--nxCloud' : '--nxCloud=false'
+    }`,
     { stdio: [0, 1, 2] }
   );
 

diff --git a/packages/cra-to-nx/src/lib/write-craco-config.ts b/packages/cra-to-nx/src/lib/write-craco-config.ts
@@ -22,7 +22,7 @@ export function writeCracoConfig(
           new TsConfigPathsPlugin({
             configFile: path.resolve(__dirname, 'tsconfig.json'),
             extensions: ['.ts', '.tsx', '.js', '.jsx'],
-            mainFields: ['module', 'main'],
+            mainFields: ['browser', 'module', 'main'],
           })
         );
         ${

diff --git a/packages/create-nx-workspace/bin/create-nx-workspace.ts b/packages/create-nx-workspace/bin/create-nx-workspace.ts
@@ -372,6 +372,9 @@ async function getConfiguration(
       } else {
         name = await determineRepoName(argv);
         appName = await determineAppName(preset, argv);
+        if (preset === Preset.ReactMonorepo) {
+          bundler = await determineBundler(argv);
+        }
       }
       style = await determineStyle(preset, argv);
     }
@@ -1009,6 +1012,7 @@ async function createSandbox(packageManager: PackageManager) {
 
   return tmpDir;
 }
+
 async function createApp(
   tmpDir: string,
   name: string,

diff --git a/packages/webpack/src/utils/with-nx.ts b/packages/webpack/src/utils/with-nx.ts
@@ -20,7 +20,7 @@ const IGNORED_WEBPACK_WARNINGS = [
 ];
 
 const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
-const mainFields = ['main', 'module'];
+const mainFields = ['browser', 'main', 'module'];
 
 const processed = new Set();
 

diff --git a/packages/workspace/src/generators/preset/preset.ts b/packages/workspace/src/generators/preset/preset.ts
@@ -56,6 +56,7 @@ async function createPreset(tree: Tree, options: Schema) {
       style: options.style,
       linter: options.linter,
       standaloneConfig: options.standaloneConfig,
+      bundler: options.bundler ?? 'webpack',
     });
   } else if (options.preset === Preset.ReactStandalone) {
     const {