如何解决作为ReactComponent的React脚本导入Svg失败,并带有完整的应用程序捆绑包
我们的网络应用程序是一个非常手动的“微型前端”,带有Build-time (lock-step release process)。子应用程序以npm软件包的形式构建,父包装器在导出最终应用程序之前构建。
在子应用程序中,我们具有一项新功能,需要呈现SVG中的资产。因此,我遵循了推荐的SVG guidelines from the docs。
import { ReactComponent as UploadIcon } from '../../../pages/Dashboard/assets/icon.upload.svg';
...component logic here:
return (<>
{other logic here...}
<UploadIcon />
</>);
现在,我们导出所有内容(包括资产),并在父应用中更新npm版本。
加载页面时应用失败,因为UploadIcon为undefined
。
元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者您可能混淆了默认导入和命名导入。
与问题相同的错误: Getting undefined when importing svg as ReactComponent in create-react-app project
但是,这是完全捆绑的应用程序,而不是直接使用它的子应用程序。
可能是什么?作为一种变通方法,我将SVG转换为JS文件并将其作为变量值返回。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。