一个简单的 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$1 (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$1 (react-dom.development.js:11276)
虽然如果我们只使用 NavBar 组件中的 html 效果很好。material-ui在模块联合中使用是否需要做一些额外的事情。