Javascript 反应组件不渲染

我有一个前端应用程序。到目前为止，我已经组合了两个子应用程序，它们是通过

容器/

项目呈现的。单独地说，在localhost:8083上，我可以很好地看到子应用程序的呈现，但与其他子应用程序不同，当我需要通过localhost:8080/仪表板查看它时，我只能看到一个白色屏幕，更糟糕的是，终端没有错误，控制台没有错误，网络请求没有错误

这是我在

container/

中的

webpack.dev.js

文件：

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

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/

文件夹中的

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

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

这是我的

组件/DashboardApp.js

文件，位于

容器内

：

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

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

---

有人能看到我错过的东西吗？为什么这个组件不能通过

容器/

进行渲染，而其他子应用程序却可以完全相同的方式进行渲染。

您缺少contentBase

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

---

当应用程序的复杂性开始增长时，它是最小的细节。虽然我的

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

从“React”导入React；
从“react Router dom”导入{交换机、路由、路由器}；
进口{
StylesProvider，
createGenerateClassName，
}来自“@material ui/core/styles”；
从“/components/Dashboard”导入仪表板；
const generateClassName=createGenerateClassName({
productionPrefix：“da”，
});
导出默认值（{history}）=>{
返回(
);
};

一旦我把它改成这样：

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

从“React”导入React；
从“react Router dom”导入{交换机、路由、路由器}；
进口{
StylesProvider，
createGenerateClassName，
}来自“@material ui/core/styles”；
从“/components/Dashboard”导入仪表板；
const generateClassName=createGenerateClassName({
productionPrefix：“da”，
});
导出默认值（{history}）=>{
返回(
);
};

---

现在它显示在父容器中。

您的远程条目url有效吗？营销：“营销@”看看这个url，看起来contentBase是missing@Sam，我只是尝试了contentBase，但它没有呈现子应用程序，看起来和以前一样。@Sam，是的，这

营销：marketing@http：//localhost:8081/remoteEntry.js“，

是有效的，我对它或

auth

也没有任何问题。很高兴，您能够使其工作，到目前为止您如何找到模块联合体。你还有其他问题吗？。我们计划在我们的应用程序中使用，只是想知道到目前为止它是如何使用的？