feat: Next Federation 7

.nvmrc

@@ -0,0 +1 @@
+v18.16.0

apps/3000-home/components/SharedNav.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, Layout } from 'antd';
 import { useRouter } from 'next/router';
+import './menu';
 
 const SharedNav = () => {
   const { asPath, push } = useRouter();

apps/3000-home/next.config.js

@@ -1,12 +1,12 @@
 const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
 
 registerPluginTSTranspiler();
-const { withNx } = require('@nx/next/plugins/with-nx');
-const { createDelegatedModule } = require('@module-federation/utilities');
+const { withNx } = require('@nrwl/next/plugins/with-nx');
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
+const { createDelegatedModule } = require('@module-federation/utilities');
 
 /**
- * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   nx: {
@@ -16,6 +16,7 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
+    // used for testing build output snapshots
 
     const remotes = {
       shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
@@ -26,6 +27,7 @@ const nextConfig = {
       // checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
       //   remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
       // }),
+
       // shop: `shop@http://localhost:3001/_next/static/${
       //   isServer ? 'ssr' : 'chunks'
       // }/remoteEntry.js`,
@@ -51,7 +53,6 @@ const nextConfig = {
           antd: {},
         },
         extraOptions: {
-          automaticAsyncBoundary: true,
           exposePages: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,

apps/3000-home/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "antd": "^4.22.3",
     "lodash": "4.17.21",
-    "next": "13.3.1",
+    "next": "13.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "js-cookie": "^3.0.1"

apps/3000-home/pages/_app.tsx

@@ -7,7 +7,7 @@ import Router, { useRouter } from 'next/router';
 import SharedNav from '../components/SharedNav';
 import HostAppMenu from '../components/menu';
 import 'antd/dist/antd.css';
-
+console.log(__webpack_share_scopes__);
 function MyApp(props) {
   const { Component, pageProps } = props;
   const { asPath } = useRouter();
@@ -26,7 +26,7 @@ function MyApp(props) {
     }
   };
   // handle first route hit.
-  React.useMemo(() => handleRouteChange(asPath), []);
+  React.useMemo(() => handleRouteChange(asPath), [asPath]);
 
   //handle route change
   React.useEffect(() => {

apps/3000-home/pages/api/test.js

@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' });
+}

apps/3000-home/pages/checkout/index.tsx

@@ -1,7 +1,7 @@
-// @ts-ignore
+//@ts-ignore
 import Page from 'checkout/pages/checkout/index';
-
 const Checkout = Page;
+// the data loading method needs to be here so next can static analyze it properly.
+// eslint-disable-next-line no-self-assign
 Checkout.getInitialProps = Page.getInitialProps;
-
 export default Checkout;

apps/3000-home/pages/dynamic-remote.js

@@ -0,0 +1,47 @@
+import React from 'react';
+//eslint-disable-next-line
+import { injectScript } from '@module-federation/utilities';
+// example of dynamic remote import on server and client
+const isServer = typeof window === 'undefined';
+//could also use
+// getModule({
+//   remoteContainer: {
+//     global: 'app2',
+//     url: 'http://localhost:3002/remoteEntry.js',
+//   },
+//   modulePath: './sample'
+// }).then((sample) => {
+//   console.log(sample)
+// });
+const dynamicContainer = injectScript({
+  global: 'checkout',
+  url: `http://localhost:3002/_next/static/${
+    isServer ? 'ssr' : 'chunks'
+  }/remoteEntry.js`,
+}).then((container) => {
+  return container.get('./CheckoutTitle').then((factory) => {
+    return factory();
+  });
+});
+const DynamicComponent = React.lazy(() => dynamicContainer);
+
+// eslint-disable-next-line react/display-name
+export default (props) => {
+  return (
+    <>
+      <React.Suspense>
+        <DynamicComponent />
+      </React.Suspense>
+      <p>Code from GSSP:</p>
+      <pre>{props.code}</pre>
+    </>
+  );
+};
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      code: (await dynamicContainer).default.toString(),
+    },
+  };
+}

apps/3000-home/pages/index.tsx

@@ -1,19 +1,18 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, lazy } from 'react';
 import Head from 'next/head';
-import dynamic from 'next/dynamic';
-
-const CheckoutTitle = dynamic(() => import('checkout/CheckoutTitle'), {
-  ssr: true,
-});
-const ButtonOldAnt = dynamic(() => import('checkout/ButtonOldAnt'), {
-  ssr: true,
-});
-const WebpackSvgRemote = dynamic(() => import('shop/WebpackSvg'), {
-  ssr: true,
-});
-const WebpackPngRemote = dynamic(() => import('shop/WebpackPng'), {
-  ssr: true,
-});
+import CheckoutTitle from 'checkout/CheckoutTitle';
+import ButtonOldAnt from 'checkout/ButtonOldAnt';
+console.log(ButtonOldAnt);
+// console.log('cc', cc);
+// const CheckoutTitle = lazy(() => import('checkout/CheckoutTitle'));
+// const ButtonOldAnt = lazy(() => import('checkout/ButtonOldAnt'));
+const WebpackSvgRemote = lazy(() =>
+  import('shop/WebpackSvg').then((m) => {
+    console.log(m);
+    return m;
+  })
+);
+const WebpackPngRemote = lazy(() => import('shop/WebpackPng'));
 
 const Home = () => {
   return (
@@ -63,7 +62,6 @@ const Home = () => {
           <b>checkout</b>
         </li>
       </ul>
-
       <h2 style={{ marginTop: '30px' }}>Federation test cases</h2>
       <table border={1} cellPadding={5}>
         <thead>

apps/3000-home/project.json

@@ -17,7 +17,13 @@
           "outputPath": "dist/apps/3000-home"
         },
         "production": {}
-      }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
     },
     "serve": {
       "executor": "@nx/next:server",
@@ -50,10 +56,11 @@
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["apps/3000-home/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/3000-home/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },
-  "tags": [],
-  "implicitDependencies": ["nextjs-mf"]
+  "tags": []
 }

apps/3000-home/remote-delegate.js

@@ -1,14 +1,13 @@
 /* eslint-disable no-undef */
-const { importDelegatedModule } = require('@module-federation/utilities');
-
-// Delegates are currently not used in this example, but are left here for testing.
-module.exports = new Promise((resolve, reject) => {
-  //eslint-disable-next-line
-  console.log('Delegate being called for', __resourceQuery);
+// eslint-disable-next-line no-async-promise-executor
+module.exports = new Promise(async (resolve, reject) => {
   //eslint-disable-next-line
   const currentRequest = new URLSearchParams(__resourceQuery).get('remote');
 
   const [global, url] = currentRequest.split('@');
+  const { importDelegatedModule } = await import(
+    '@module-federation/utilities/src/utils/importDelegatedModule'
+  );
 
   importDelegatedModule({
     global,

apps/3001-shop/next.config.js

@@ -23,33 +23,33 @@ const nextConfig = {
         name: 'shop',
         filename: 'static/chunks/remoteEntry.js',
         remotes: {
-          home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
-            remote: `home_app@http://localhost:3000/_next/static/${
-              isServer ? 'ssr' : 'chunks'
-            }/remoteEntry.js`,
-          }),
-          shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
-            remote: `shop@http://localhost:3001/_next/static/${
-              isServer ? 'ssr' : 'chunks'
-            }/remoteEntry.js`,
-          }),
-          checkout: createDelegatedModule(
-            require.resolve('./remote-delegate.js'),
-            {
-              remote: `checkout@http://localhost:3002/_next/static/${
-                isServer ? 'ssr' : 'chunks'
-              }/remoteEntry.js`,
-            }
-          ),
-          // home: `home_app@http://localhost:3000/_next/static/${
-          //   isServer ? 'ssr' : 'chunks'
-          // }/remoteEntry.js`,
-          // shop: `shop@http://localhost:3001/_next/static/${
-          //   isServer ? 'ssr' : 'chunks'
-          // }/remoteEntry.js`,
-          // checkout: `checkout@http://localhost:3002/_next/static/${
-          //   isServer ? 'ssr' : 'chunks'
-          // }/remoteEntry.js`,
+          // home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+          //   remote: `home_app@http://localhost:3000/_next/static/${
+          //     isServer ? 'ssr' : 'chunks'
+          //   }/remoteEntry.js`,
+          // }),
+          // shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+          //   remote: `shop@http://localhost:3001/_next/static/${
+          //     isServer ? 'ssr' : 'chunks'
+          //   }/remoteEntry.js`,
+          // }),
+          // checkout: createDelegatedModule(
+          //   require.resolve('./remote-delegate.js'),
+          //   {
+          //     remote: `checkout@http://localhost:3002/_next/static/${
+          //       isServer ? 'ssr' : 'chunks'
+          //     }/remoteEntry.js`,
+          //   }
+          // ),
+          home: `home_app@http://localhost:3000/_next/static/${
+            isServer ? 'ssr' : 'chunks'
+          }/remoteEntry.js`,
+          shop: `shop@http://localhost:3001/_next/static/${
+            isServer ? 'ssr' : 'chunks'
+          }/remoteEntry.js`,
+          checkout: `checkout@http://localhost:3002/_next/static/${
+            isServer ? 'ssr' : 'chunks'
+          }/remoteEntry.js`,
         },
         exposes: {
           './useCustomRemoteHook': './components/useCustomRemoteHook',
@@ -59,10 +59,10 @@ const nextConfig = {
         },
         shared: {
           lodash: {},
+          antd: {},
         },
         extraOptions: {
           exposePages: true,
-          automaticAsyncBoundary: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,
           automaticPageStitching: false,

apps/3001-shop/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "antd": "^4.22.3",
     "lodash": "4.17.21",
-    "next": "13.3.1",
+    "next": "13.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/3001-shop/pages/_app.tsx

@@ -27,7 +27,7 @@ function MyApp({ Component, pageProps }) {
     }
   };
   // handle first route hit.
-  React.useMemo(() => handleRouteChange(asPath), []);
+  React.useMemo(() => handleRouteChange(asPath), [asPath]);
 
   //handle route change
   React.useEffect(() => {

apps/3001-shop/pages/shop/exposed-pages.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { injectScript } from '@module-federation/nextjs-mf/utils';
 
 export default function ExposedPages() {