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/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 diff --git a/nextjs-antd/package.json b/nextjs-antd/package.json index 8fb7c054f35..9932de9ee7d 100644 --- a/nextjs-antd/package.json +++ b/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" } } 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" } }