diff --git a/e2e/storybook/src/storybook-nested.test.ts b/e2e/storybook/src/storybook-nested.test.ts index 762cdb36e0992a..ea51121a2b74b2 100644 --- 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 index 9afb17e70e1ab3..acc7fc8aec6ea9 100644 --- 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 index 808a90772bdc5a..94f4a37962fb89 100644 --- 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 index bac4a658b6e7e3..8953c8282f5724 100644 --- 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 index 964d81b8f1467c..9bca8980573ba7 100644 --- 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 index 1ba8654b21abd0..97483117bf2785 100644 --- 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 index ce7fbb9d99b2a9..b3d23e8ad4fefd 100644 --- 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 {