我创建了一个带有共享组件库的 monorepo，但是当我从该库导入包含来自 @mui/icons-material 的 MUI 图标的组件时，出现以下错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
这是我在 console.log() 导入的 Icon 时得到的结果
import AddIcon from '@mui/icons-material/Save';
console.log(AddIcon)
{
default: {
'$$typeof': Symbol(react.memo),
type: { '$$typeof': Symbol(react.forward_ref), render: [Function] },
compare: null
}
}
共享组件中的其他所有内容都工作正常，包括常规 MUI 组件，并且如果我将它们直接添加到我的项目中，图标也会正常工作，因此我无法弄清楚它们为什么会破坏共享组件。
我的共享库的对等依赖项中有 "@mui/icons-material": "^5.6.1" 和 "@mui/icons-material": "^5.6.1" 作为我所在项目中的依赖项将共享组件导入到。
我一直在设置一个 monorepo，目标是创建一个共享组件库以用于多个不同的 Next.js 应用程序（按照此示例），但是每当我从共享库导入组件时，我都会得到
Unhandled Runtime Error
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 …