fix(react): set mode correctly when serve --prod is used (#10235)

Fixes #10199

packages/web/src/executors/dev-server/dev-server.impl.ts

@@ -113,9 +113,6 @@ function getBuildOptions(
 ): WebWebpackExecutorOptions {
   const target = parseTargetString(options.buildTarget);
 
-  // TODO(jack): [Nx 14] Remove this line once we generate `development` configuration by default + add migration for it if missing
-  target.configuration ??= '';
-
   const overrides: Partial<WebWebpackExecutorOptions> = {
     watch: false,
   };

packages/web/src/utils/devserver.config.spec.ts

@@ -0,0 +1,84 @@
+import { getDevServerConfig } from '@nrwl/web/src/utils/devserver.config';
+
+jest.mock('./webpack/partials/common', () => ({
+  getCommonConfig: () => ({
+    output: {},
+    resolve: {},
+  }),
+  getCommonPartial: () => ({}),
+}));
+
+jest.mock('tsconfig-paths-webpack-plugin', () => ({
+  TsconfigPathsPlugin: class TsconfigPathsPlugin {},
+}));
+
+describe('getDevServerConfig', () => {
+  it('should set mode to production when optimization is on', () => {
+    const result = getDevServerConfig(
+      '/',
+      '/app',
+      '/app/src',
+      {
+        optimization: true,
+        root: '/app',
+        sourceRoot: '/app/src',
+        main: '/app/src/main.ts',
+        outputPath: '/dist/app',
+        tsConfig: '/app/tsconfig.app.json',
+        compiler: 'babel',
+        assets: [],
+        fileReplacements: [],
+        index: '/app/src/index.html',
+        scripts: [],
+        styles: [],
+      },
+      {
+        buildTarget: 'app:build:production',
+        allowedHosts: '',
+        liveReload: false,
+        hmr: false,
+        ssl: false,
+        watch: false,
+        open: false,
+        host: 'localhost',
+        port: 4200,
+      }
+    );
+
+    expect(result.mode).toEqual('production');
+  });
+
+  it('should set mode to development when optimization is off', () => {
+    const result = getDevServerConfig(
+      '/',
+      '/app',
+      '/app/src',
+      {
+        root: '/app',
+        sourceRoot: '/app/src',
+        main: '/app/src/main.ts',
+        outputPath: '/dist/app',
+        tsConfig: '/app/tsconfig.app.json',
+        compiler: 'babel',
+        assets: [],
+        fileReplacements: [],
+        index: '/app/src/index.html',
+        scripts: [],
+        styles: [],
+      },
+      {
+        buildTarget: 'app:build:development',
+        allowedHosts: '',
+        liveReload: false,
+        hmr: false,
+        ssl: false,
+        watch: false,
+        open: false,
+        host: 'localhost',
+        port: 4200,
+      }
+    );
+
+    expect(result.mode).toEqual('development');
+  });
+});

packages/web/src/utils/devserver.config.ts

@@ -1,5 +1,6 @@
 import { logger } from '@nrwl/devkit';
-import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
+import type { Configuration as WebpackConfiguration } from 'webpack';
+import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import * as path from 'path';
 import { basename, resolve } from 'path';
 
@@ -18,14 +19,16 @@ export function getDevServerConfig(
   sourceRoot: string,
   buildOptions: WebWebpackExecutorOptions,
   serveOptions: WebDevServerOptions
-): Partial<WebpackDevServerConfiguration> {
+): Partial<WebpackConfiguration> {
   const webpackConfig = getWebConfig(
     workspaceRoot,
     projectRoot,
     sourceRoot,
     buildOptions,
-    true, // Don't need to support legacy browsers for dev.
-    false
+    true,
+    typeof buildOptions.optimization === 'boolean'
+      ? buildOptions.optimization
+      : buildOptions.optimization?.scripts
   );
 
   (webpackConfig as any).devServer = getDevServerPartial(
@@ -56,7 +59,7 @@ export function getDevServerConfig(
     })
   );
 
-  return webpackConfig as any;
+  return webpackConfig as WebpackConfiguration;
 }
 
 function getDevServerPartial(
@@ -67,7 +70,7 @@ function getDevServerPartial(
   const servePath = buildServePath(buildOptions);
 
   const { scripts: scriptsOptimization, styles: stylesOptimization } =
-    buildOptions.optimization as OptimizationOptions;
+    (buildOptions.optimization || {}) as OptimizationOptions;
 
   const config: WebpackDevServerConfiguration = {
     host: options.host,

packages/web/src/utils/webpack/partials/styles.ts

@@ -150,7 +150,7 @@ export function getStylesConfig(
     ? true
     : typeof buildOptions.optimization === 'boolean'
     ? !buildOptions.optimization
-    : buildOptions.optimization.styles &&
+    : buildOptions.optimization?.styles &&
       // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
       // for component css.
       buildOptions.sourceMap !== 'hidden');