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 ( - <> - -