react svg Invariant Violation: Invalid tag

版权声明：转载请注明出处 https://blog.csdn.net/geol200709/article/details/89947992

引入 @svgr/webpack，

import Test from '../img/form/CollRearEnd.svg';
class Coll extends Component {
  render(){
    return  <Test />
  }
}
export default Coll;

webpack.config.js

{
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   use: [
     {
       loader: 'babel-loader',
     },
     {
       loader: '@svgr/webpack',
       options: {
         babel: false,
         icon: true,
       },
     },
   ],
 },

最后报错：Invariant Violation: Invalid tag: ...

最后找到原因，原来 webpack.config.js 下面已经有配置svg loader，以致于 loader 冲突。解决方法：将后面svg的配置删除，只保留@svgr/webpack loader 即可。