React组件不渲染

Question

我有一个React微前端应用程序。到目前为止，我已经把两个通过container/项目渲染的子应用程序放在一起。单独地，在localhost:8083上，我可以很好地看到子应用程序渲染，但与其他子应用程序不同，当我需要通过localhost:8080/dashboard查看它时，我只得到一个白屏幕，更糟糕的是，终端没有错误，控制台没有错误，网络请求没有错误。

这是我的webpack.dev.js文件在container/:

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);

我已经反复看了一遍，没有发现任何问题。

这是我在container/文件夹中的webpack.common.js文件:

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'
}),
]
}

我已经看过了，没有发现有什么问题。

这是我的components/DashboardApp.js文件在container/:

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} />;
};

我的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>
);
};

有谁能看出我可能错过了什么吗?为什么这个组件不能通过container/来渲染，而其他的子应用却可以。

Answer 1

当应用程序的复杂性开始增长时，它是最小的细节。虽然我的container/src/App.js文件有path="/dashboard"，但我的dashboard/src/App.js文件没有，它看起来像这样:

import React from "react";
import { Switch, Route, Router } from "react-router-dom";
import {
StylesProvider,
createGenerateClassName,
} from "@material-ui/core/styles";
import Dashboard from "./components/Dashboard";
const generateClassName = createGenerateClassName({
productionPrefix: "da",
});
export default ({ history }) => {
return (
<div>
<StylesProvider generateClassName={generateClassName}>
<Router history={history}>
<Switch>
<Route exact path='/' component={Dashboard} />
</Switch>
</Router>
</StylesProvider>
</div>
);
};

有一次我把它改成了:

import React from "react";
import { Switch, Route, Router } from "react-router-dom";
import {
StylesProvider,
createGenerateClassName,
} from "@material-ui/core/styles";
import Dashboard from "./components/Dashboard";
const generateClassName = createGenerateClassName({
productionPrefix: "da",
});
export default ({ history }) => {
return (
<div>
<StylesProvider generateClassName={generateClassName}>
<Router history={history}>
<Switch>
<Route exact path='/dashboard' component={Dashboard} />
</Switch>
</Router>
</StylesProvider>
</div>
);
};

现在显示在父容器内。

Answer 2

您缺少contentBase。

devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3002,
},
output: {
publicPath: "http://localhost:3002/",
},