fix(nextjs-antd): Fixed module federation dependencies (#2689)

* Fixed nextjs-antd

* fix(nextjs-antd): fixed README

* Update index.js

* Update index.js

Author: lexasq

nextjs-antd/3000-home/package.json

@@ -8,15 +8,15 @@
     "start": "next start -p 3000"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "^5.1.2",
-    "antd": "^4.22.3",
+    "@module-federation/nextjs-mf": "5.1.2",
+    "antd": "4.22.3",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "link:../shared",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "webpack": "5.72.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "5.8.0"
   }
 }

nextjs-antd/3001-shop/next.config.js

@@ -2,7 +2,10 @@ const NextFederationPlugin = require('@module-federation/nextjs-mf');
 
 module.exports = {
   webpack(config, options) {
-    if (!options.isServer) {
+      const { webpack } = options;
+      Object.assign(config.experiments, { topLevelAwait: true });
+      if (!options.isServer) {
+      //config.cache=false
       config.plugins.push(
         new NextFederationPlugin({
           name: 'shop',
@@ -27,10 +30,12 @@ module.exports = {
             './pages/_menu': './pages/_menu.js',
             './pages-map': './pages-map.js',
           },
-          extraOptions: {
-            enableImageLoaderFix: true,
-            enableUrlLoaderFix: true,
-          },
+            shared: {},
+            extraOptions: {
+                exposePages: true,
+                enableImageLoaderFix: true,
+                enableUrlLoaderFix: true,
+            },
         }),
       );
     }

nextjs-antd/3001-shop/package.json

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "rm -rf .next && next dev -p 3001",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start -p 3001"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "^5.1.2",
-    "antd": "^4.22.3",
+    "@module-federation/nextjs-mf": "5.1.2",
+    "antd": "4.22.3",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "link:../shared",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "webpack": "5.72.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "5.8.0"
   }
 }

nextjs-antd/3002-checkout/package.json

@@ -8,15 +8,15 @@
     "start": "next start -p 3002"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "^5.1.2",
+    "@module-federation/nextjs-mf": "5.1.2",
     "antd": "4.20.0",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "link:../shared",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "webpack": "5.72.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "5.8.0"
   }
 }

nextjs-antd/README.md

@@ -1,14 +1,10 @@
 # Next.js with Module Federation
 
-Module Federation in Next.js depends on <a href="https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf">@module-federation/nextjs-mf</a> It will not work unless you have access to this plugin, which is not free.
-
-Due to the effort to support Next.js and funding constraints, I have moved the plugin to a paid model.
-
 NOTE: There seems to be a problem with css-in-js sharing between federated modules. This is likely due to some internal module not being shared as a singleton. PR is welcome
 
 ## Getting Started
 
-1. run `npm install @module-federation/nextjs-mf --registry https://r.privjs.com` with npm 7 (yarn probbably better) or install it directly in each folder/app, note the plugin is not free.
+1. run `yarn install` with npm 7 (yarn probbably better).
 2. run `yarn start` and browse to `http://localhost:3001`
 
 # We are available to consult
@@ -17,8 +13,6 @@ Looking for SSR over `fetch()` or architecture support and designs for module fe
 
 Contact me <a href="mailto:zackary.l.jackson@gmail.com">zackary.l.jackson@gmail.com</a> or <a href="https://twitter.com/scriptedalchemy">@ScriptedAlchemy</a> on Twitter
 
-All solutions for next.js currently require a paid access or paid plugin
-
 ## Context
 
 We have three next.js applications
@@ -52,7 +46,7 @@ const config = {
 };
 ```
 
-However, in the case of Next.js - you need to use <a href="https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf">@module-federation/nextjs-mf</a>
+However, in the case of Next.js - you need to use @module-federation/nextjs-mf
 
 ## Reference Points
 

nextjs-antd/package.json

@@ -11,12 +11,14 @@
   "scripts": {
     "clear": "cd 3000-home && rm -rf node_modules && rm -rf .next && cd ../3001-shop && rm -rf node_modules && rm -rf .next && cd ../3002-checkout && rm -rf node_modules && rm -rf .next",
     "start": "yarn dev",
-    "dev": "yarn install && concurrently \"cd 3000-home; npm run dev\" \"cd 3001-shop; npm run dev\" \"cd 3002-checkout; npm run dev\"",
-    "build": "concurrently \"cd 3000-home; npm run build\" \"cd 3001-shop; npm run build\" \"cd 3002-checkout; npm run build\"",
-    "serve": "concurrently \"cd 3000-home; npm run start\" \"cd 3001-shop; npm run start\" \"cd 3002-checkout; npm run start\""
+    "dev": "concurrently \"yarn --cwd 3000-home dev\" \"yarn --cwd 3001-shop dev\" \"yarn --cwd 3002-checkout dev\"",
+    "build": "concurrently \"yarn --cwd 3000-home build\" \"yarn --cwd 3001-shop build\" \"yarn --cwd 3002-checkout build\"",
+    "serve": "concurrently \"yarn --cwd 3000-home start\" \"yarn --cwd 3001-shop start\" \"yarn --cwd 3002-checkout start\""
   },
   "dependencies": {
     "concurrently": "^7.0.0",
+    "@module-federation/nextjs-mf": "6.0.5",
+    "webpack": "5.72.1",
     "cpx": "1.5.0"
   }
 }

nextjs-antd/shared/package.json

@@ -5,6 +5,7 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "feather-route-matcher": "^4.0.0"
+    "@module-federation/nextjs-mf": "5.1.2",
+    "feather-route-matcher": "4.0.0"
   }
 }