无法通过 webpack 模块联合使用 material-ui 导入组件

Question

一个简单的 POC，我们有一个 React 应用程序 host_ui 作为主机，material_components 作为远程。 material_ui 公开组件 NavBar.

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const NavBar = () => {

  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6">
          News
          </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

export default NavBar;

在主机中导入它会引发错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at Object.useContext (react.development.js:1484)
    at useTheme (useTheme.js:10)
    at useStyles (makeStyles.js:237)
    at WithStyles(ForwardRef(AppBar)) (withStyles.js:68)
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

react-dom.development.js:20085 The above error occurred in the <WithStyles(ForwardRef(AppBar))> component:

    at WithStyles(ForwardRef(AppBar)) (webpack://material_components/./node_modules/@material-ui/styles/esm/withStyles/withStyles.js?:61:31)
    at NavBar
    at Suspense
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4005)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork (react-dom.development.js:23959)
    at performUnitOfWork (react-dom.development.js:22771)
    at workLoopSync (react-dom.development.js:22702)
    at renderRootSync (react-dom.development.js:22665)
    at performSyncWorkOnRoot (react-dom.development.js:22288)
    at eval (react-dom.development.js:11327)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority (react-dom.development.js:11276)

虽然如果我们只使用 NavBar 组件中的 html 它工作正常。在模块联合中使用 material-ui 是否需要做一些额外的事情。

Answer 1

以这种方式为您的导航组件配置模块联合：

new ModuleFederationPlugin({
  name: "NavApp",
  filename: 'remoteEntry.js',
  exposes:{
    './NavComponent':'./src/{root of the nav project}'
  },
  shared: {
    ...deps,
    react: {
      singleton: true,
      requiredVersion: deps.react,
    },
    "react-dom": {
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  },
})

以这种方式为使用 Nav 的应用程序配置模块联合：

`new ModuleFederationPlugin({
      name: "Appliaction",
      remotes: {
        NavApp: 'NavApp@http://localhost:{port that is running your Nav 
        application}/remoteEntry.js',    
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },`

按如下方式配置您的导航包：

  "dependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-react": "^7.13.13",
    "add": "^2.0.6",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.0",
    "html-webpack-plugin": "^5.3.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "yarn": "^1.22.10",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@material-ui/core": "^5.0.0-alpha.28",
    "@material-ui/icons": "^5.0.0-alpha.28",
    "@material-ui/styles": "^4.10.0",
    "@material-ui/system": "^4.11.3",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "serve": "^11.3.0"
  }

不要更改react或react-dom的版本，如果有其他依赖，也添加[=30=]

像这样配置您的主应用程序（它正在使用 Nav）的包：

"dependencies": { "@babel/core": "^7.13.14", "@babel/preset-react": "^7.13.13", "babel-loader": "^8.2.2", "css-loader": "^5.2.0", "html-webpack-plugin": "^5.3.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "style-loader": "^2.0.0", "webpack": "^5.30.0", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2", "@material-ui/core": "^4.9.5", "@material-ui/icons": "^4.9.1", "copy-webpack-plugin": "^5.1.1", "react": "^16.13.0", "react-dom": "^16.13.0", "serve": "^11.3.0" }

不要更改react或react-dom的版本，如果有其他依赖，也添加[=30=]

从两个应用程序中删除 node_modules 文件夹并删除文件 yarn.lock 或 package-lock.json。从 Yarn 或 Npm 在应用程序中再次安装（以安装新的依赖项）。进行这些更改后，一切都应该正常。

Answer 2

我也有这个问题，当 APP1 与 React=17.0.0 和 APP2 与 React=17.0.2。基本上，我有一个特殊的配置来处理这种情况并下载了 React 的新副本，但由于某种原因，它无法与 MUI.

一起正常工作

只有当我为两个应用程序设置相同版本的 React 并在 ModuleFedration 设置中为两个应用程序设置该配置时，它才对我有用：

  shared: {
    react: {
    singleton: true,
    requiredVersion: deps["react"],
    },
    "react-dom": {
       singleton: true,
       requiredVersion: deps["react-dom"],
    }
  }

我在 MUI github paga 中打开了一个问题：https://github.com/mui-org/material-ui/issues/29038#issuecomment-943317668

无法通过 webpack 模块联合使用 material-ui 导入组件

Unable to import a component using material-ui via webpack module federation

reactjs

material-ui

webpack-5

webpack-module-federation