Update nextjs implementation to react 18 (#1987)

Fixing some problems with botched route implemenations as well

README.md

@@ -44,7 +44,7 @@ This repository is to showcase examples of how Webpack 5's new Module Federation
 - [x] [Angular Universal](./angular-universal-ssr/README.md) — Remote and Host app with SSR, lazy modules and components.
 - [x] [NextJS Sidecar Build](./nextjs-sidecar/README.md) — Sidecar build to enable module-federation alongside Next codebases.
 - [x] 💰[NextJS](./nextjs/README.md) — Operation, with [nextjs-mf](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf).
-- [x] 💰[NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr) 
+- [x] 💰[NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr)
 - [x] [Building A Plugin-based Workflow Designer With Angular and Module Federation](https://github.com/manfredsteyer/module-federation-with-angular-dynamic-workflow-designer) — External Example
 - [x] [Vue.js](./vue3-demo/README.md) — Simple host/remote (render function / sfc) example using Vue 3.0.
 - [x] [Vue 2 in Vue 3](./vue2-in-vue3/README.md) — Vue 3 application loading remote Vue 2 component.

nextjs-ssr/checkout/async-pages/app.js

@@ -1,4 +1,4 @@
-import App from "next/app";
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const Nav = dynamic(() => {
   return import('home/nav');
@@ -13,9 +13,8 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;

nextjs-ssr/checkout/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",

nextjs-ssr/home/async-pages/_app.js

@@ -1,18 +1,17 @@
-import App from "next/app";
+import App from 'next/app';
 import Nav from '../components/nav';
 
-function MyApp({Component, pageProps}) {
-    return (
-        <>
-            <Nav/>
-            <Component {...pageProps} />
-        </>
-    );
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Nav />
+      <Component {...pageProps} />
+    </>
+  );
 }
 
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;
-

nextjs-ssr/home/components/helloWorld.js

@@ -1,3 +1,3 @@
 export const HelloWorld = () => {
-    return <>Hello World</>
-}
+  return <>Hello World</>;
+};

nextjs-ssr/home/components/nav.js

@@ -2,15 +2,9 @@ import React from 'react';
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
 
-export const HelloWorld = dynamic(
-    () =>
-        import("./helloWorld").then(
-            (mod) => mod.HelloWorld
-        ),
-    {
-      ssr: true,
-    }
-);
+export const HelloWorld = dynamic(() => import('./helloWorld').then(mod => mod.HelloWorld), {
+  ssr: true,
+});
 const links = [
   { href: 'https://zeit.co/now', label: 'ZEIT' },
   { href: 'https://github.com/zeit/next.js', label: 'GitHub' },
@@ -21,7 +15,7 @@ const links = [
 
 const Nav = () => (
   <nav>
-      <HelloWorld/>
+    <HelloWorld />
     <ul>
       <li>
         <Link href="/">

nextjs-ssr/home/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",

nextjs-ssr/home/pages/checkout.js

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 
 const Page = dynamic(() => import('checkout/checkout'));
 Page.getInitialProps = async ctx => {
-  const page = import('checkout/checkout')
+  const page = import('checkout/checkout');
   const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);

nextjs-ssr/shop/async-pages/_app.js

@@ -1,4 +1,4 @@
-import App from "next/app";
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const Nav = dynamic(() => import('home/nav'));
 
@@ -11,7 +11,7 @@ function MyApp({ Component, pageProps }) {
   );
 }
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;

nextjs-ssr/shop/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",

nextjs-ssr/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@module-federation/nextjs-ssr@0.1.0-rc.5":
-  version "0.1.0-rc.5"
-  resolved "http://r.privjs.com/@module-federation%2fnextjs-ssr/-/nextjs-ssr-0.1.0-rc.5.tgz#bf2c903b9fac8377981a317172427513eed8b572"
-  integrity sha512-gxIHXFSLfIg9aDAE69eKKxeM+PVJXNApsa1HBxtb/MFUbZprnR9hg9YJq2cd1LBewk1FAc/TrkeCtbtCNQb+vA==
+"@module-federation/nextjs-ssr@0.1.0-rc.6":
+  version "0.1.0-rc.6"
+  resolved "http://r.privjs.com/@module-federation%2fnextjs-ssr/-/nextjs-ssr-0.1.0-rc.6.tgz#a65bcb4371b686ecfda9f8171d20a89ef9f5c03b"
+  integrity sha512-BJeyNBy0uhwKnyCCgD8mmM1npIlFMVKFo93Ayd+sm+mZrAsLWC2fgfFQ+JMppCgtQYyebo5OE+MVmMhaWxoHvg==
   dependencies:
     chalk "4.1.2"
     encoding "^0.1.13"

nextjs/checkout/package.json

@@ -8,14 +8,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "nextjs-shared": "*",
-    "@module-federation/nextjs-mf": "^3.3.0",
+    "@module-federation/nextjs-mf": "3.5.0",
     "lodash": "4.17.21",
-    "next": "12.1.0",
+    "next": "12.1.6",
     "next-compose-plugins": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "webpack": "5.70.0",
+    "nextjs-shared": "*",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "webpack": "5.72.0",
     "webpack-merge": "^5.8.0"
   }
 }

nextjs/checkout/pages/[...slug].js

@@ -1,3 +1,11 @@
-import { createFederatedCatchAll } from 'nextjs-shared';
-
-export default createFederatedCatchAll(['home', 'shop']);
+import dynamic from 'next/dynamic';
+const page = import('../realPages/[...slug]');
+const Page = dynamic(() => import('../realPages/[...slug]'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
+};
+export default Page;

nextjs/checkout/pages/_app.js

@@ -1,20 +1,19 @@
+import { Suspense } from 'react';
+import App from 'next/app';
 import dynamic from 'next/dynamic';
-const Nav = dynamic(
-  () => {
-    const mod = import('home/nav');
-    console.log(mod);
-    return mod;
-  },
-  { ssr: false },
-);
+const page = import('../realPages/_app');
 
-function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Nav />
-      <Component {...pageProps} />
-    </>
-  );
-}
+const Page = dynamic(() => import('../realPages/_app'));
+Page.getInitialProps = async ctx => {
+  const appProps = await App.getInitialProps(ctx);
 
-export default MyApp;
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return {
+      ...appProps,
+      ...getInitialProps(ctx),
+    };
+  }
+  return { ...appProps };
+};
+export default Page;

nextjs/checkout/pages/checkout.js

@@ -1,44 +1,12 @@
-import React from 'react';
-import Head from 'next/head';
+import dynamic from 'next/dynamic';
+const page = import('../realPages/checkout');
 
-const Checkout = props => (
-  <div>
-    <Head>
-      <title>checkout</title>
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-
-    <div className="hero">
-      <h1>checkout page</h1>
-      <h3 className="title">This is a federated page owned by localhost:3000</h3>
-      <span>
-        {' '}
-        Data from federated <pre>getInitalProps</pre>
-      </span>
-      <br />
-      <pre>{JSON.stringify(props, null, 2)}</pre>
-    </div>
-    <style jsx>{`
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 20px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-    `}</style>
-  </div>
-);
-Checkout.getInitialProps = async () => {
-  const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
-  return swapi;
+const Page = dynamic(() => import('../realPages/checkout'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
 };
-export default Checkout;
+export default Page;

nextjs/checkout/pages/index.js

@@ -1,3 +1,12 @@
-import { createFederatedCatchAll } from 'nextjs-shared';
+import dynamic from 'next/dynamic';
+const page = import('../realPages/index');
 
-export default createFederatedCatchAll(['home', 'shop']);
+const Page = dynamic(() => import('../realPages/index'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
+};
+export default Page;

nextjs/checkout/pages/shop/mybag.js

@@ -1,39 +1,12 @@
-import React from 'react';
-import Head from 'next/head';
+import dynamic from 'next/dynamic';
+const page = import('../../realPages/shop/mybag');
 
-const MyBag = props => (
-  <div>
-    <Head>
-      <title>My Bag</title>
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-
-    <div className="hero">
-      <h1>my bag page</h1>
-      <h3 className="title">This is a federated page, consumed by localhost:3001</h3>
-      <br />
-    </div>
-    <style jsx>{`
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 20px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-    `}</style>
-  </div>
-);
-MyBag.getInitialProps = async () => {
-  const swapi = await fetch('https://swapi.dev/api/people/1').then(res => res.json());
-  return swapi;
+const Page = dynamic(() => import('../../realPages/shop/mybag'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
 };
-export default MyBag;
+export default Page;

nextjs/checkout/realPages/[...slug].js

@@ -1,12 +1,6 @@
+import { createFederatedCatchAll } from 'nextjs-shared';
+
+export default createFederatedCatchAll(['home', 'shop']);
+
 import dynamic from 'next/dynamic';
 const page = import('../realPages/[...slug]');
-
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
-};
-export default Page;