svgrwebpack引入的报错

svgr/webpack引入的报错

背景：

​ 新的项目的首页是一整张svg的图，上面有各种入口，需要点击不同的入口进入不同的课程。React有一种方法是把盖svg引入成组件，继而可以捕获到相应的点击事件。

​ 我参考网上的方式，用了@svgr/webpack的包，发现了如下的报错。

​ 参考连接：React 代码 Import Svg as ReactComponent 失败 - muamaker - 博客园 (cnblogs.com)

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js): Error: Expected > (0:538). If this is valid SVG, it's probably a bug in svg-parser. Please raise an issue at https://github.com/Rich-Harris/svg-parser/issues – thanks!

解决：

​ 其实这是这个库本身的一个bug,在webpack5的版本就会引起该报错，之前有项目是webpack4的版本则不会引发该问题。这个库上次维护已经是两年前了，笔者真的不建议再使用该库了…

​ Issues · Rich-Harris/svg-parser · GitHub

​ 后来解决的方法将原来的库替换成svg-inline-loader。配置需要做些如下的更改。

{
	test: /\.svg$/,
	loader: 'svg-inline-loader',
},