feat(ssr): switch server federation to UniversalFederationPlugin with useRuntimePlugin; add @module-federation/enhanced devDeps; keep SSR enabled

Author: ScriptedAlchemy

federated-css-react-ssr/expose-apps/expose-css-module/config/module-federation.js

@@ -1,6 +1,6 @@
 const deps = require('../package.json').dependencies;
 const { ModuleFederationPlugin } = require('webpack').container;
-const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
+const { UniversalFederationPlugin } = require('@module-federation/node');
 
 module.exports = {
   client: new ModuleFederationPlugin({
@@ -27,7 +27,9 @@ module.exports = {
     },
   }),
   server: [
-    new NodeFederationPlugin({
+    new UniversalFederationPlugin({
+      isServer: true,
+      useRuntimePlugin: true,
       name: 'expose_css_module',
       filename: 'remoteEntry.js',
       library: { type: 'commonjs-module' },
@@ -38,23 +40,10 @@ module.exports = {
       },
       shared: {
         ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        },
-        'isomorphic-style-loader': {
-          singleton: true,
-        },
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+        'isomorphic-style-loader': { singleton: true },
       },
     }),
-    new StreamingTargetPlugin({
-      name: 'expose_css_module',
-      library: { type: 'commonjs-module' },
-      remotes: {},
-    }),
   ],
 };

federated-css-react-ssr/expose-apps/expose-css-module/package.json

@@ -24,7 +24,8 @@
     "webpack": "5.101.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "6.0.1"
+    "webpack-merge": "6.0.1",
+    "@module-federation/enhanced": "0.17.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

federated-css-react-ssr/expose-apps/expose-css/config/module-federation.js

@@ -1,6 +1,6 @@
 const deps = require('../package.json').dependencies;
 const { ModuleFederationPlugin } = require('webpack').container;
-const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
+const { UniversalFederationPlugin } = require('@module-federation/node');
 
 module.exports = {
   client: new ModuleFederationPlugin({
@@ -24,7 +24,9 @@ module.exports = {
     },
   }),
   server: [
-    new NodeFederationPlugin({
+    new UniversalFederationPlugin({
+      isServer: true,
+      useRuntimePlugin: true,
       name: 'expose_css',
       filename: 'remoteEntry.js',
       library: { type: 'commonjs-module' },
@@ -35,20 +37,9 @@ module.exports = {
       },
       shared: {
         ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        },
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
       },
     }),
-    new StreamingTargetPlugin({
-      name: 'expose_css',
-      library: { type: 'commonjs-module' },
-      remotes: {},
-    }),
   ],
 };

federated-css-react-ssr/expose-apps/expose-css/package.json

@@ -24,7 +24,8 @@
     "webpack": "5.101.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "6.0.1"
+    "webpack-merge": "6.0.1",
+    "@module-federation/enhanced": "0.17.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

federated-css-react-ssr/expose-apps/expose-jss/config/module-federation.js

@@ -1,6 +1,6 @@
 const deps = require('../package.json').dependencies;
 const { ModuleFederationPlugin } = require('webpack').container;
-const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
+const { UniversalFederationPlugin } = require('@module-federation/node');
 
 module.exports = {
   client: new ModuleFederationPlugin({
@@ -26,7 +26,9 @@ module.exports = {
     },
   }),
   server: [
-    new NodeFederationPlugin({
+    new UniversalFederationPlugin({
+      isServer: true,
+      useRuntimePlugin: true,
       name: 'expose_jss',
       filename: 'remoteEntry.js',
       library: { type: 'commonjs-module' },
@@ -36,23 +38,10 @@ module.exports = {
       },
       shared: {
         ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        },
-        'react-jss': {
-          singleton: true,
-        },
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+        'react-jss': { singleton: true },
       },
     }),
-    new StreamingTargetPlugin({
-      name: 'expose_jss',
-      library: { type: 'commonjs-module' },
-      remotes: {},
-    }),
   ],
 };

federated-css-react-ssr/expose-apps/expose-jss/package.json

@@ -23,7 +23,8 @@
     "webpack": "5.101.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "6.0.1"
+    "webpack-merge": "6.0.1",
+    "@module-federation/enhanced": "0.17.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

federated-css-react-ssr/expose-apps/expose-less/config/module-federation.js

@@ -1,6 +1,6 @@
 const deps = require('../package.json').dependencies;
 const { ModuleFederationPlugin } = require('webpack').container;
-const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
+const { UniversalFederationPlugin } = require('@module-federation/node');
 
 module.exports = {
   client: new ModuleFederationPlugin({
@@ -24,7 +24,9 @@ module.exports = {
     },
   }),
   server: [
-    new NodeFederationPlugin({
+    new UniversalFederationPlugin({
+      isServer: true,
+      useRuntimePlugin: true,
       name: 'expose_less',
       filename: 'remoteEntry.js',
       library: { type: 'commonjs-module' },
@@ -35,20 +37,9 @@ module.exports = {
       },
       shared: {
         ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        },
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
       },
     }),
-    new StreamingTargetPlugin({
-      name: 'expose_less',
-      library: { type: 'commonjs-module' },
-      remotes: {},
-    }),
   ],
 };

federated-css-react-ssr/expose-apps/expose-less/package.json

@@ -26,7 +26,8 @@
     "webpack": "5.101.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "6.0.1"
+    "webpack-merge": "6.0.1",
+    "@module-federation/enhanced": "0.17.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

federated-css-react-ssr/expose-apps/expose-scss/config/module-federation.js

@@ -1,6 +1,6 @@
 const deps = require('../package.json').dependencies;
 const { ModuleFederationPlugin } = require('webpack').container;
-const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
+const { UniversalFederationPlugin } = require('@module-federation/node');
 
 module.exports = {
   client: new ModuleFederationPlugin({
@@ -24,7 +24,9 @@ module.exports = {
     },
   }),
   server: [
-    new NodeFederationPlugin({
+    new UniversalFederationPlugin({
+      isServer: true,
+      useRuntimePlugin: true,
       name: 'expose_scss',
       filename: 'remoteEntry.js',
       library: { type: 'commonjs-module' },
@@ -35,20 +37,9 @@ module.exports = {
       },
       shared: {
         ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        },
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
       },
     }),
-    new StreamingTargetPlugin({
-      name: 'expose_scss',
-      library: { type: 'commonjs-module' },
-      remotes: {},
-    }),
   ],
 };

federated-css-react-ssr/expose-apps/expose-scss/package.json

@@ -25,7 +25,8 @@
     "webpack": "5.101.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
-    "webpack-merge": "6.0.1"
+    "webpack-merge": "6.0.1",
+    "@module-federation/enhanced": "0.17.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",