From ada5ff0a5e3e01d07889c499c4df4dc0e90496e7 Mon Sep 17 00:00:00 2001 From: Zack Jackson Date: Wed, 25 May 2022 10:37:59 -0700 Subject: [PATCH] Update nextjs implementation to react 18 (#1987) Fixing some problems with botched route implemenations as well --- README.md | 2 +- nextjs-ssr/checkout/async-pages/app.js | 9 +- nextjs-ssr/checkout/package.json | 2 +- nextjs-ssr/home/async-pages/_app.js | 23 +- nextjs-ssr/home/components/helloWorld.js | 4 +- nextjs-ssr/home/components/nav.js | 14 +- nextjs-ssr/home/package.json | 2 +- nextjs-ssr/home/pages/checkout.js | 2 +- nextjs-ssr/shop/async-pages/_app.js | 8 +- nextjs-ssr/shop/package.json | 2 +- nextjs-ssr/yarn.lock | 8 +- nextjs/checkout/package.json | 12 +- nextjs/checkout/pages/[...slug].js | 14 +- nextjs/checkout/pages/_app.js | 33 +-- nextjs/checkout/pages/checkout.js | 52 +--- nextjs/checkout/pages/index.js | 13 +- nextjs/checkout/pages/shop/mybag.js | 47 +-- nextjs/checkout/realPages/[...slug].js | 14 +- nextjs/checkout/realPages/_app.js | 28 +- nextjs/checkout/realPages/checkout.js | 52 +++- nextjs/checkout/realPages/index.js | 13 +- nextjs/checkout/realPages/shop/mybag.js | 47 ++- nextjs/home/package.json | 10 +- nextjs/home/pages/[...slug].js | 4 +- nextjs/home/pages/_app.js | 20 +- nextjs/home/pages/index.js | 4 +- nextjs/home/realPages/index.js | 2 +- nextjs/index.spec.js | 83 ------ nextjs/shared/index.js | 25 +- nextjs/shop/package.json | 10 +- nextjs/shop/pages/[...slug].js | 4 +- nextjs/shop/pages/_app.js | 10 +- nextjs/shop/pages/index.js | 4 +- nextjs/shop/pages/p/[...slug].js | 4 +- nextjs/shop/pages/shop.js | 4 +- nextjs/yarn.lock | 276 ++++++++++-------- react-nextjs/README.md | 33 ++- .../host/next.config.js | 59 ++-- .../host/pages/_app.js | 6 +- .../host/pages/_document.js | 7 +- .../host/pages/api/hello.js | 2 +- .../host/pages/index.js | 26 +- .../remote/src/App.jsx | 5 +- .../remote/src/bootstrap.jsx | 2 +- .../remote/src/components/Nav.jsx | 3 +- .../remote/webpack.config.js | 5 +- .../nextjs-host-remote/host/next.config.js | 59 ++-- .../nextjs-host-remote/host/pages/_app.js | 6 +- .../host/pages/_document.js | 7 +- .../host/pages/api/hello.js | 2 +- .../nextjs-host-remote/host/pages/index.js | 25 +- react-nextjs/nextjs-host-remote/package.json | 5 +- .../components/nextjs-remote-component.js | 3 +- .../nextjs-host-remote/remote/next.config.js | 10 +- .../nextjs-host-remote/remote/pages/_app.js | 6 +- .../remote/pages/api/hello.js | 2 +- .../nextjs-host-remote/remote/pages/index.js | 24 +- .../react-host-nextjs-remote/host/src/App.jsx | 9 +- .../host/src/bootstrap.jsx | 2 +- .../host/src/components/Nav.jsx | 3 +- .../host/webpack.config.js | 7 +- .../components/nextjs-remote-component.js | 3 +- .../remote/components/nextjs-remote-page.js | 3 +- .../remote/next.config.js | 12 +- .../remote/pages/_app.js | 6 +- .../remote/pages/api/hello.js | 2 +- .../remote/pages/index.js | 20 +- .../react-host-remote/host/src/App.jsx | 7 +- .../react-host-remote/host/src/bootstrap.jsx | 2 +- .../host/src/components/Nav.jsx | 3 +- .../react-host-remote/host/webpack.config.js | 8 +- .../react-host-remote/remote/src/App.jsx | 22 +- .../remote/src/bootstrap.jsx | 6 +- .../remote/src/components/Nav.jsx | 5 +- .../remote/src/routes/Invoices.jsx | 4 +- .../remote/webpack.config.js | 7 +- 76 files changed, 616 insertions(+), 673 deletions(-) delete mode 100644 nextjs/index.spec.js diff --git a/README.md b/README.md index 6be7d290eba..cfa577c2150 100644 --- a/README.md +++ b/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. diff --git a/nextjs-ssr/checkout/async-pages/app.js b/nextjs-ssr/checkout/async-pages/app.js index 910c55f36e2..217d14b3df1 100644 --- a/nextjs-ssr/checkout/async-pages/app.js +++ b/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; diff --git a/nextjs-ssr/checkout/package.json b/nextjs-ssr/checkout/package.json index bfc280c341e..380933c322c 100644 --- a/nextjs-ssr/checkout/package.json +++ b/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", diff --git a/nextjs-ssr/home/async-pages/_app.js b/nextjs-ssr/home/async-pages/_app.js index 950887cf2cc..4de993d237c 100644 --- a/nextjs-ssr/home/async-pages/_app.js +++ b/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 ( - <> -