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

…k package is installed
nrwl · Jan 23, 2023 · 36cd253 · 36cd253
1 parent b804fc0
commit 36cd253
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 3 deletions.
diff --git a/e2e/storybook/src/storybook-nested.test.ts b/e2e/storybook/src/storybook-nested.test.ts
@@ -28,10 +28,11 @@ describe('Storybook generators for nested workspaces', () => {
 
     // create a workspace with a single react app at the root
     runCreateWorkspace(wsName, {
-      preset: 'react-experimental',
+      preset: 'react-standalone',
       appName,
       style: 'css',
       packageManager,
+      bundler: 'vite',
     });
 
     runCLI(

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', () => {
@@ -236,6 +240,7 @@ describe('create-nx-workspace', () => {
       style: 'css',
       appName,
       packageManager: 'npm',
+      bundler: 'webpack',
     });
 
     checkFilesDoNotExist('yarn.lock');

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,7 +183,7 @@ function createTempWorkspace(options: NormalizedOptions) {
       options.npxYesFlagNeeded ? '-y' : ''
     } create-nx-workspace@latest temp-workspace --appName=${
       options.reactAppName
-    } --preset=react-monorepo --style=css --packageManager=${
+    } --preset=react-monorepo --style=css --bundler=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-web.ts b/packages/webpack/src/utils/with-web.ts
@@ -348,6 +348,11 @@ export function withWeb() {
 
     config.plugins.push(...plugins);
 
+    config.resolve.mainFields = [
+      'browser',
+      ...(config.resolve.mainFields ?? []),
+    ];
+
     config.module = {
       ...config.module,
       rules: [

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: 'webpack',
     });
   } else if (options.preset === Preset.ReactStandalone) {
     const {