From c5b939cef9054028bc8ef7b8d4bdc5b39739448b Mon Sep 17 00:00:00 2001 From: wibed Date: Sat, 28 Aug 2021 11:48:44 +0200 Subject: [PATCH] update nextjs to 11 apply changes discussed in https://github.com/telenko/node-mf-example/issues/2 modified smartButton to conform to the rules of hooks --- host/next.config.js | 19 +------------------ host/package.json | 2 +- host/pages/_app.js | 13 +++++-------- remoteLib/src/SmartButton.jsx | 7 +++---- 4 files changed, 10 insertions(+), 31 deletions(-) diff --git a/host/next.config.js b/host/next.config.js index e56c20a..4ca3a12 100644 --- a/host/next.config.js +++ b/host/next.config.js @@ -4,30 +4,13 @@ const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPl const path = require("path"); module.exports = { - future: { webpack5: true }, webpack: (config, options) => { const { buildId, dev, isServer, defaultLoaders, webpack } = options; const mfConf = { remotes: { remoteLib: isServer ? "remoteLib@http://localhost:3002/node/remoteEntry.js" - //This is a hack (I cannot run successfully MF in client-side with NextJS and React, maybe doing smth wrong) - : { - external: `external new Promise((r, j) => { - window['remoteLib'].init({ - react: { - "${packageJsonDeps.react}": { - get: () => Promise.resolve().then(() => () => globalThis.React), - } - } - }); - r({ - get: (request) => window['remoteLib'].get(request), - init: (args) => {} - }); - })` - } - // : "remoteLib@http://localhost:3001/remoteEntry.js", + : "remoteLib@http://localhost:3002/web/remoteEntry.js" }, shared: { react: { diff --git a/host/package.json b/host/package.json index a96cdf0..903f720 100644 --- a/host/package.json +++ b/host/package.json @@ -8,7 +8,7 @@ "start": "next start" }, "dependencies": { - "next": "10.2.3", + "next": "11.0.1", "react": "17.0.2", "react-dom": "17.0.2" }, diff --git a/host/pages/_app.js b/host/pages/_app.js index 94a358d..e1750ac 100644 --- a/host/pages/_app.js +++ b/host/pages/_app.js @@ -2,17 +2,14 @@ import Head from "next/head"; import "../styles/globals.css"; import React from "react"; -//This is a part of a hack I need (sorry for that). Take a look at next.config.js -globalThis.React = React; + +const SmartButton = (await import ("remoteLib/SmartButton")).default; function MyApp({ Component, pageProps }) { return ( - <> - -