共享 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()导入图标

时得到的结果

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

在使用MUI和涡轮回购设计启动器(tsup)时遇到了同样的问题。我不喜欢这种方法，但它似乎确实有效。

import SaveBase from '@mui/icons-material/Save';
import SvgIcon from '@mui/material/SvgIcon/SvgIcon';
const normalizeIcon = (Icon: typeof SvgIcon) => {
return ((Icon as any).default ? (Icon as any).default : Icon) as typeof SvgIcon;
};
const SaveIcon = normalizeIcon(SaveBase);
<SaveIcon />

Answer 2

更改导入也适用于我。

从

// import ([w]+) from '@mui/icons-material/([w]+)'
import MenuIcon from '@mui/icons-material/Menu';

// import { $2 as $1 } from '@mui/icons-material'
import { Menu as MenuIcon } from '@mui/icons-material';

Answer 3

我用commonjs和es模块构建我的包。我将commonjs放在包的根目录中，而es modules放在esm/中。子目录。在我的esm/子目录package。json只有{"type": "module"}。我不使用exports在根package.json/esm/index.js，但只有main和module,module指向。。esm/中的输出实际上是tsc --target es6 --module esnext --outDir ./build/esm的结果

与<<p> strong> package.json 在esm/子目录下，我得到了您指出的确切错误，图标导入将是一个具有default的对象，指向预期的导入数据。但是，如果我删除package.json在esm/一切又好起来了。它似乎也大大减少了启动时间，所以我猜我的包设置中有什么东西坏了。

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