feat(webpack): remove support for legacy browsers (#14190)

e2e/web/src/web.test.ts

@@ -311,7 +311,7 @@ describe('CLI - Environment Variables', () => {
 
     updateFile(main2, `${newCode2}\n${content2}`);
 
-    runCLI(`run-many --target build --all --no-optimization`, {
+    runCLI(`run-many --target build --all --outputHashing=none`, {
       env: {
         ...process.env,
         NODE_ENV: 'test',

packages/react/plugins/component-testing/index.ts

@@ -199,36 +199,27 @@ function buildTargetWebpack(
   const options = normalizeOptions(
     withSchemaDefaults(parsed, context),
     workspaceRoot,
+    buildableProjectConfig.root!,
     buildableProjectConfig.sourceRoot!
   );
 
   if (options.webpackConfig) {
     let customWebpack: any;
 
-    const isScriptOptimizeOn =
-      typeof options.optimization === 'boolean'
-        ? options.optimization
-        : options.optimization && options.optimization.scripts
-        ? options.optimization.scripts
-        : false;
-
     customWebpack = resolveCustomWebpackConfig(
       options.webpackConfig,
       options.tsConfig
     );
 
     return async () => {
       customWebpack = await customWebpack;
-      const defaultWebpack = getWebpackConfig(
-        context,
-        options,
-        isScriptOptimizeOn,
-        {
-          root: ctProjectConfig.root,
-          sourceRoot: ctProjectConfig.sourceRoot,
-          configuration: parsed.configuration,
-        }
-      );
+      // TODO(jack): Once webpackConfig is always set in @nrwl/webpack:webpack, we no longer need this default.
+      const defaultWebpack = getWebpackConfig(context, {
+        ...options,
+        root: workspaceRoot,
+        projectRoot: ctProjectConfig.root,
+        sourceRoot: ctProjectConfig.sourceRoot,
+      });
 
       if (customWebpack) {
         return await customWebpack(defaultWebpack, {

packages/react/plugins/component-testing/webpack-fallback.ts

@@ -1,6 +1,6 @@
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
-import { getCSSModuleLocalIdent } from '@nrwl/webpack/src/executors/webpack/lib/get-webpack-config';
+import { getCSSModuleLocalIdent } from '@nrwl/webpack';
 
 export function buildBaseWebpackConfig({
   tsConfigPath = 'tsconfig.cy.json',

packages/react/plugins/storybook/index.ts

@@ -4,17 +4,19 @@ import {
   readJsonFile,
   workspaceRoot,
 } from '@nrwl/devkit';
-import { getBaseWebpackPartial } from '@nrwl/webpack/src/utils/config';
+import {
+  composePlugins,
+  getBaseWebpackPartial,
+} from '@nrwl/webpack/src/utils/config';
 import { NormalizedWebpackExecutorOptions } from '@nrwl/webpack/src/executors/webpack/schema';
-import { getStylesPartial } from '@nrwl/webpack/src/executors/webpack/lib/get-webpack-config';
 import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
 import { join } from 'path';
 import { gte } from 'semver';
 import { Configuration, DefinePlugin, WebpackPluginInstance } from 'webpack';
 import * as mergeWebpack from 'webpack-merge';
 import { mergePlugins } from './merge-plugins';
-
-const reactWebpackConfig = require('../webpack');
+import { withReact } from '../webpack';
+import { withNx, withWeb } from '@nrwl/webpack';
 
 // This is shamelessly taken from CRA and modified for NX use
 // https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
@@ -99,6 +101,8 @@ export const webpack = async (
   const builderOptions: NormalizedWebpackExecutorOptions = {
     ...options,
     root: options.configDir,
+    // These are blank because root is the absolute path to .storybook folder
+    projectRoot: '',
     sourceRoot: '',
     fileReplacements: [],
     sourceMap: {
@@ -118,21 +122,13 @@ export const webpack = async (
   const extractCss = storybookWebpackConfig.mode === 'production';
 
   // ESM build for modern browsers.
-  const baseWebpackConfig = mergeWebpack.merge([
-    getBaseWebpackPartial(builderOptions, {
-      isScriptOptimizeOn,
-      skipTypeCheck: true,
-    }),
-    getStylesPartial(
-      options.workspaceRoot,
-      options.configDir,
-      builderOptions,
-      extractCss
-    ),
-  ]);
-
-  // run it through the React customizations
-  const finalConfig = reactWebpackConfig(baseWebpackConfig);
+  let baseWebpackConfig: Configuration = {};
+  const configure = composePlugins(
+    withNx({ skipTypeChecking: true }),
+    withWeb(),
+    withReact()
+  );
+  const finalConfig = configure(baseWebpackConfig, { options: builderOptions });
 
   // Check whether the project .babelrc uses @emotion/babel-plugin. There's currently
   // a Storybook issue (https://github.com/storybookjs/storybook/issues/13277) which apparently
@@ -197,7 +193,8 @@ export const webpack = async (
         plugins: mergePlugins(
           ...((storybookWebpackConfig.resolve.plugins ??
             []) as unknown as WebpackPluginInstance[]),
-          ...(finalConfig.resolve.plugins ?? [])
+          ...((finalConfig.resolve
+            .plugins as unknown as WebpackPluginInstance[]) ?? [])
         ),
       },
       plugins: mergePlugins(

packages/react/plugins/webpack.ts

@@ -1,58 +1,77 @@
 import type { Configuration } from 'webpack';
 import ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+import { NormalizedWebpackExecutorOptions } from '@nrwl/webpack';
+import { ExecutorContext } from 'nx/src/config/misc-interfaces';
 
 // Add React-specific configuration
-export function getWebpackConfig(config: Configuration) {
-  config.module.rules.push({
-    test: /\.svg$/,
-    issuer: /\.(js|ts|md)x?$/,
-    use: [
-      {
-        loader: require.resolve('@svgr/webpack'),
-        options: {
-          svgo: false,
-          titleProp: true,
-          ref: true,
+export function withReact() {
+  return function configure(
+    config: Configuration,
+    _ctx?: {
+      options: NormalizedWebpackExecutorOptions;
+      context: ExecutorContext;
+    }
+  ): Configuration {
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.(js|ts|md)x?$/,
+      use: [
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            svgo: false,
+            titleProp: true,
+            ref: true,
+          },
         },
-      },
-      {
-        loader: require.resolve('file-loader'),
-        options: {
-          name: '[name].[hash].[ext]',
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: '[name].[hash].[ext]',
+          },
         },
-      },
-    ],
-  });
+      ],
+    });
 
-  if (config.mode === 'development' && config['devServer']?.hot) {
-    // add `react-refresh/babel` to babel loader plugin
-    const babelLoader = config.module.rules.find(
-      (rule) =>
-        typeof rule !== 'string' &&
-        rule.loader?.toString().includes('babel-loader')
-    );
-    if (babelLoader && typeof babelLoader !== 'string') {
-      babelLoader.options['plugins'] = [
-        ...(babelLoader.options['plugins'] || []),
-        [
-          require.resolve('react-refresh/babel'),
-          {
-            skipEnvCheck: true,
-          },
-        ],
-      ];
+    if (config.mode === 'development' && config['devServer']?.hot) {
+      // add `react-refresh/babel` to babel loader plugin
+      const babelLoader = config.module.rules.find(
+        (rule) =>
+          typeof rule !== 'string' &&
+          rule.loader?.toString().includes('babel-loader')
+      );
+      if (babelLoader && typeof babelLoader !== 'string') {
+        babelLoader.options['plugins'] = [
+          ...(babelLoader.options['plugins'] || []),
+          [
+            require.resolve('react-refresh/babel'),
+            {
+              skipEnvCheck: true,
+            },
+          ],
+        ];
+      }
+      // add https://github.com/pmmmwh/react-refresh-webpack-plugin to webpack plugin
+      config.plugins.push(new ReactRefreshPlugin());
     }
-    // add https://github.com/pmmmwh/react-refresh-webpack-plugin to webpack plugin
-    config.plugins.push(new ReactRefreshPlugin());
-  }
 
-  // enable webpack node api
-  config.node = {
-    __dirname: true,
-    __filename: true,
-  };
+    // enable webpack node api
+    config.node = {
+      __dirname: true,
+      __filename: true,
+    };
 
-  return config;
+    return config;
+  };
 }
 
-module.exports = getWebpackConfig;
+// Support existing default exports as well as new named export.
+const legacyExport: any = withReact();
+legacyExport.withReact = withReact;
+
+/** @deprecated use `import { withReact } from '@nrwl/react'` */
+// This is here for backward compatibility if anyone imports {getWebpackConfig} directly.
+// TODO(jack): Remove in Nx 16
+legacyExport.getWebpackConfig = withReact();
+
+module.exports = legacyExport;

packages/webpack/index.ts

@@ -1,3 +1,4 @@
+export * from './src/utils/create-copy-plugin';
 export * from './src/utils/config';
 export * from './src/generators/init/init';
 export * from './src/generators/webpack-project/webpack-project';
@@ -11,3 +12,6 @@ export type {
   FileReplacement,
 } from './src/executors/webpack/schema';
 export * from './src/executors/webpack/webpack.impl';
+export * from './src/utils/get-css-module-local-ident';
+export * from './src/utils/with-nx';
+export * from './src/utils/with-web';

packages/webpack/package.json

@@ -54,7 +54,6 @@
     "postcss": "^8.4.14",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",
-    "raw-loader": "^4.0.2",
     "rxjs": "^6.5.4",
     "sass": "^1.42.1",
     "sass-loader": "^12.2.0",

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

@@ -30,6 +30,7 @@ export async function* devServerExecutor(
   const buildOptions = normalizeOptions(
     getBuildOptions(serveOptions, context),
     context.root,
+    projectRoot,
     sourceRoot
   );
 

packages/webpack/src/executors/dev-server/lib/get-dev-server-config.ts

@@ -20,13 +20,7 @@ export function getDevServerConfig(
   const workspaceRoot = context.root;
   const { root: projectRoot, sourceRoot } =
     context.projectsConfigurations.projects[context.projectName];
-  const webpackConfig = getWebpackConfig(
-    context,
-    buildOptions,
-    typeof buildOptions.optimization === 'boolean'
-      ? buildOptions.optimization
-      : buildOptions.optimization?.scripts
-  );
+  const webpackConfig = getWebpackConfig(context, buildOptions);
 
   (webpackConfig as any).devServer = getDevServerPartial(
     workspaceRoot,