共享 React 组件库中使用的 MUI 图标不会呈现：错误：元素类型无效：需要字符串或类/函数，但得到：对象

Question

我创建了一个带有共享组件库的 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" 作为我所在项目中的依赖项将共享组件导入到。

Answer 1

我使用commonjs和es 模块构建了我的包。我在包的根目录中有commonjs ，在esm/子目录中有es 模块。在我的esm/子目录中，我有一个package.json ，其中只有. 我没有在根package.json中使用，而只是使用and where指向./esm/index.js。esm/中的输出实际上是 的结果。{"type": "module"}exportsmainmodulemoduletsc --target es6 --module esnext --outDir ./build/esm

使用esm/子目录中的package.json，我得到了您指出的确切错误，并且图标导入将是一个指向预期导入数据的对象。但是，如果我删除esm/中的package.json ，一切都会恢复正常。它似乎也大大减少了启动时间，所​​以我猜我的包设置中有些东西被破坏了。default

我不确定这是否也适用于您，但症状肯定是相同的。