无法获得@svgr/webpack的“`ReactComponent`”出口
无法获得@svgr/webpack的“`ReactComponent`”出口
提问于 2022-02-21 16:35:40
我试图让同样的进口陈述同时适用于Vite和Webpack的设置(由童话簿使用)，而且我无法让它像广告中所宣传的那样为Webpack工作。
根据，5.5版的说法，这应该是可行的：
// Does not work (undefined)
import {ReactComponent as UilPlus} from '@iconscout/unicons/svg/line/plus.svg'但事实并非如此。只有default导出：
// Works
import UilPlus from '@iconscout/unicons/svg/line/plus.svg'我怎么才能解决这个问题？我甚至尝试过显式地使用namedExport选项，但是它没有生效。
配置：
use: [
{
loader: '@svgr/webpack',
options: { namedExport: 'ReactComponent' }
},$ jq .version node_modules/\@svgr/webpack/package.json
"5.5.0"回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-21 21:53:40
在阅读了源代码的@svgr/webpack、@svgr/core和@svgr/babel-plugin-transform-svg-component的5.5版本，阅读了装载机的工作原理之后，事情终于有了意义。
结果是缺少了一个关键的部分:显示使用ReactComponent的示例为svg处理添加了一个额外的加载程序。我不明白稍后添加的加载程序如何会影响更早的某些内容。直到我阅读了Webpack 4的装载机文档，它解释了如何从右向左应用加载器。
一旦这种情况消失了，现在很明显，svgr插件以某种方式看到它接收到的输入来自另一个加载程序，并相应地调整它的行为。这正是@svgr/webpack在第32至41项中发生的情况，您可以在快照测试中看到预期的输出。
...
export default \\"data:image/svg+xml;base64,PD94bWwg..."
export { SvgIcon as ReactComponent };"```webpack模块实际上只进行检测，并将该信息传递给@svgr/core，而核心模块则使用babel-plugin-transform-svg-component来实际更改输出基于以前的出口。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71209854
复制相关文章
相似问题
腾讯云开发者
