I have developed a React microfrontend application consisting of two sub-apps rendered through the container/ project. Both sub-apps render perfectly in isolation on localhost:8083. However, when attempting to view them via localhost:8080/dashboard, I am presented with nothing but a white screen. What's even more puzzling is that there are no errors appearing in the terminal, console, or network requests.
Below is an excerpt from my webpack.dev.js file located in the container/ directory:
const { merge } = require("webpack-merge");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const commonConfig = require("./webpack.common");
const packageJson = require("../package.json");
const devConfig = {
mode: "development",
output: {
publicPath: "http://localhost:8080/",
},
devServer: {
port: 8080,
historyApiFallback: true,
},
plugins: [
new ModuleFederationPlugin({
name: "container",
remotes: {
marketing: "marketing@http://localhost:8081/remoteEntry.js",
auth: "auth@http://localhost:8082/remoteEntry.js",
dashboard: "dashboard@http://localhost:8083/remoteEntry.js",
},
shared: packageJson.dependencies,
}),
],
};
module.exports = merge(commonConfig, devConfig);
I have thoroughly examined this configuration and can't seem to locate any issues.
The next snippet shows the content of webpack.common.js residing within the container/ folder:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
]
}
Similarly, no apparent issues were found upon reviewing the above setup.
Furthermore, here is the code from my components/DashboardApp.js file inside the container/ directory:
import { mount } from "dashboard/DashboardApp";
import React, { useRef, useEffect } from "react";
import { useHistory } from "react-router-dom";
export default ({ onSignIn }) => {
const ref = useRef(null);
const history = useHistory();
useEffect(() => {
const { onParentNavigate } = mount(ref.current, {
initialPath: history.location.pathname,
onNavigate: ({ pathname: nextPathname }) => {
const { pathname } = history.location;
if (pathname !== nextPathname) {
history.push(nextPathname);
}
},
onSignIn,
});
history.listen(onParentNavigate);
}, []);
return <div ref={ref} />;
};
Lastly, a look at my container/src/App.js:
import React, { lazy, Suspense, useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import {
StylesProvider,
createGenerateClassName,
} from "@material-ui/core/styles";
import Progress from "./components/Progress";
import Header from "./components/Header";
const MarketingLazy = lazy(() => import("./components/MarketingApp"));
const AuthLazy = lazy(() => import("./components/AuthApp"));
const DashboardLazy = lazy(() => import("./components/DashboardApp"));
const generateClassName = createGenerateClassName({
productionPrefix: "co",
});
export default () => {
const [isSignedIn, setIsSignedIn] = useState(false);
return (
<BrowserRouter>
<StylesProvider generateClassName={generateClassName}>
<div>
<Header
onSignOut={() => setIsSignedIn(false)}
isSignedIn={isSignedIn}
/>
<Suspense fallback={<Progress />}>
<Switch>
<Route path='/auth'>
<AuthLazy onSignIn={() => setIsSignedIn(true)} />
</Route>
<Route path='/dashboard' component={DashboardLazy} />
<Route path='/' component={MarketingLazy} />
</Switch>
</Suspense>
</div>
</StylesProvider>
</BrowserRouter>
);
};
If anyone notices anything amiss or has encountered a similar issue before, please share insights as to why this particular component fails to render through the container/, unlike the other identical sub-apps.