From 5afc298714ff515908c99d94697d72961cd6a8f4 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 26 Jan 2023 16:30:18 +0200 Subject: [PATCH 1/4] Fixed nextjs-antd --- nextjs-antd/3000-home/package.json | 8 ++++---- nextjs-antd/3001-shop/next.config.js | 15 ++++++++++----- nextjs-antd/3001-shop/package.json | 10 +++++----- nextjs-antd/3002-checkout/package.json | 6 +++--- nextjs-antd/package.json | 8 +++++--- nextjs-antd/shared/index.js | 3 ++- nextjs-antd/shared/package.json | 3 ++- 7 files changed, 31 insertions(+), 22 deletions(-) diff --git a/nextjs-antd/3000-home/package.json b/nextjs-antd/3000-home/package.json index 957d35f18f1..9e1e880916d 100644 --- a/nextjs-antd/3000-home/package.json +++ b/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" } } diff --git a/nextjs-antd/3001-shop/next.config.js b/nextjs-antd/3001-shop/next.config.js index 81efa32b113..10bb38839a8 100644 --- a/nextjs-antd/3001-shop/next.config.js +++ b/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, + }, }), ); } diff --git a/nextjs-antd/3001-shop/package.json b/nextjs-antd/3001-shop/package.json index 6222a4fa3fe..7ee069e40ee 100644 --- a/nextjs-antd/3001-shop/package.json +++ b/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" } } diff --git a/nextjs-antd/3002-checkout/package.json b/nextjs-antd/3002-checkout/package.json index a0fbe699aa6..760220e6546 100644 --- a/nextjs-antd/3002-checkout/package.json +++ b/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" } } diff --git a/nextjs-antd/package.json b/nextjs-antd/package.json index c57fb1c092a..43ee15eda61 100644 --- a/nextjs-antd/package.json +++ b/nextjs-antd/package.json @@ -9,12 +9,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" } } diff --git a/nextjs-antd/shared/index.js b/nextjs-antd/shared/index.js index 8f27cf1b041..4a61fb1eec1 100644 --- a/nextjs-antd/shared/index.js +++ b/nextjs-antd/shared/index.js @@ -3,12 +3,13 @@ import createMatcher from 'feather-route-matcher'; import { injectScript, remotes } from '@module-federation/nextjs-mf/lib/utils'; export async function matchFederatedPage(path) { - console.log(remotes); + console.log("remotes:", remotes); const maps = await Promise.all( Object.keys(remotes).map(remote => { console.log('FederatedCatchAll:', { remote }); return injectScript(remote).then(container => { + console.log(remote, container); return container .get('./pages-map') .then(factory => ({ remote, config: factory().default })) diff --git a/nextjs-antd/shared/package.json b/nextjs-antd/shared/package.json index 45267d88487..1dc3d4757b6 100644 --- a/nextjs-antd/shared/package.json +++ b/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" } } From bc242ff4acbe97583d66d28b2dabb94315256db0 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 27 Jan 2023 09:27:16 +0200 Subject: [PATCH 2/4] fix(nextjs-antd): fixed README --- nextjs-antd/README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/nextjs-antd/README.md b/nextjs-antd/README.md index 9bbc563f4e0..3a5f1cace41 100644 --- a/nextjs-antd/README.md +++ b/nextjs-antd/README.md @@ -1,14 +1,10 @@ # Next.js with Module Federation -Module Federation in Next.js depends on @module-federation/nextjs-mf 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 zackary.l.jackson@gmail.com or @ScriptedAlchemy 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 @module-federation/nextjs-mf +However, in the case of Next.js - you need to use @module-federation/nextjs-mf ## Reference Points From 1533b512127f46fc9259318b3e6d1f8d56e85aa4 Mon Sep 17 00:00:00 2001 From: Alexey Umanskiy Date: Tue, 31 Jan 2023 13:11:26 +0200 Subject: [PATCH 3/4] Update index.js --- nextjs-antd/shared/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/nextjs-antd/shared/index.js b/nextjs-antd/shared/index.js index 4a61fb1eec1..d27f8fdb58f 100644 --- a/nextjs-antd/shared/index.js +++ b/nextjs-antd/shared/index.js @@ -9,7 +9,6 @@ export async function matchFederatedPage(path) { console.log('FederatedCatchAll:', { remote }); return injectScript(remote).then(container => { - console.log(remote, container); return container .get('./pages-map') .then(factory => ({ remote, config: factory().default })) From 08c17b1a8a96f5c335975a20f822a234c2327a6c Mon Sep 17 00:00:00 2001 From: Alexey Umanskiy Date: Tue, 31 Jan 2023 14:54:36 +0200 Subject: [PATCH 4/4] Update index.js --- nextjs-antd/shared/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nextjs-antd/shared/index.js b/nextjs-antd/shared/index.js index d27f8fdb58f..8f27cf1b041 100644 --- a/nextjs-antd/shared/index.js +++ b/nextjs-antd/shared/index.js @@ -3,7 +3,7 @@ import createMatcher from 'feather-route-matcher'; import { injectScript, remotes } from '@module-federation/nextjs-mf/lib/utils'; export async function matchFederatedPage(path) { - console.log("remotes:", remotes); + console.log(remotes); const maps = await Promise.all( Object.keys(remotes).map(remote => { console.log('FederatedCatchAll:', { remote });