fix(react): skip DefinePlugin for SSR (#16612)

Author: Coly010

packages/react/src/generators/host/files/module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,12 +1,12 @@
-const { composePlugins, withNx } = require('@nx/webpack');
-const { withReact } = require('@nx/react');
-const { withModuleFederationForSSR } = require('@nx/react/module-federation');
+const {composePlugins, withNx} = require('@nx/webpack');
+const {withReact} = require('@nx/react');
+const {withModuleFederationForSSR} = require('@nx/react/module-federation');
 
 const baseConfig = require('./module-federation.config');
 
 const defaultConfig = {
-  ...baseConfig
+    ...baseConfig
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact(), withModuleFederationForSSR(defaultConfig));
+module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));

packages/react/src/generators/remote/files/module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,12 +1,12 @@
-const { composePlugins, withNx } = require('@nx/webpack');
-const { withReact } = require('@nx/react');
-const { withModuleFederationForSSR } = require('@nx/react/module-federation');
+const {composePlugins, withNx} = require('@nx/webpack');
+const {withReact} = require('@nx/react');
+const {withModuleFederationForSSR} = require('@nx/react/module-federation');
 
 const baseConfig = require("./module-federation.server.config");
 
 const defaultConfig = {
-  ...baseConfig,
+    ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
-module.exports = composePlugins(withNx(), withReact(), withModuleFederationForSSR(defaultConfig));
+module.exports = composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));

packages/react/src/module-federation/with-module-federation-ssr.ts

@@ -4,16 +4,12 @@ import { getModuleFederationConfig } from './utils';
 export async function withModuleFederationForSSR(
   options: ModuleFederationConfig
 ) {
-  const reactWebpackConfig = require('../../plugins/webpack');
-
   const { sharedLibraries, sharedDependencies, mappedRemotes } =
     await getModuleFederationConfig(options, {
       isServer: true,
     });
 
   return (config) => {
-    config = reactWebpackConfig(config);
-
     config.target = false;
     config.output.uniqueName = options.name;
     config.optimization = {

packages/react/src/module-federation/with-module-federation.ts

@@ -10,13 +10,10 @@ import ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationP
 export async function withModuleFederation(
   options: ModuleFederationConfig
 ): Promise<AsyncNxWebpackPlugin> {
-  const reactWebpackConfig = require('../../plugins/webpack');
-
   const { sharedDependencies, sharedLibraries, mappedRemotes } =
     await getModuleFederationConfig(options);
 
   return (config, ctx) => {
-    config = reactWebpackConfig(config, ctx);
     config.output.uniqueName = options.name;
     config.output.publicPath = 'auto';
 

packages/webpack/src/utils/with-web.ts

@@ -12,7 +12,7 @@ import { getOutputHashFormat } from './hash-format';
 import { PostcssCliResources } from './webpack/plugins/postcss-cli-resources';
 import { normalizeExtraEntryPoints } from './webpack/normalize-entry';
 
-import { NxWebpackPlugin } from './config';
+import { NxWebpackExecutionContext, NxWebpackPlugin } from './config';
 import {
   ExtraEntryPointClass,
   NormalizedWebpackExecutorOptions,
@@ -25,7 +25,6 @@ import CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 import MiniCssExtractPlugin = require('mini-css-extract-plugin');
 import autoprefixer = require('autoprefixer');
 import postcssImports = require('postcss-import');
-import { NxWebpackExecutionContext } from './config';
 
 interface PostcssOptions {
   (loader: any): any;
@@ -47,6 +46,7 @@ export interface WithWebOptions {
   stylePreprocessorOptions?: any;
   styles?: Array<ExtraEntryPointClass | string>;
   subresourceIntegrity?: boolean;
+  ssr?: boolean;
 }
 
 // Omit deprecated options
@@ -110,11 +110,13 @@ export function withWeb(pluginOptions: WithWebOptions = {}): NxWebpackPlugin {
         })
       );
     }
-    plugins.push(
-      new webpack.DefinePlugin(
-        getClientEnvironment(process.env.NODE_ENV).stringified
-      )
-    );
+    if (!pluginOptions.ssr) {
+      plugins.push(
+        new webpack.DefinePlugin(
+          getClientEnvironment(process.env.NODE_ENV).stringified
+        )
+      );
+    }
 
     const entry: { [key: string]: string[] } = {};
     const globalStylePaths: string[] = [];
@@ -557,7 +559,6 @@ function getCommonLoadersForGlobalStyle(
 
 function postcssOptionsCreator(
   options: MergedOptions,
-
   {
     includePaths,
     forCssModules = false,