在 react-redux MERN 应用程序中导入 SVG 时出错答案

【问题标题】：Error importing SVG in react-redux MERN application在 react-redux MERN 应用程序中导入 SVG 时出错
【发布时间】：2016-11-05 23:42:24
【问题描述】：

我需要将 .svg 文件加载到 MERN 样板项目中的反应组件中。我在 webpack.config.dev.js 中使用此条目配置了 webpack url-loader：

{
 test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.otf$|\.ttf$/i,
 loader: 'url-loader?limit=10000',
}

我尝试通过以下方式访问组件中的资源：

import logo from '../../../../assets/logo_h.svg'

但我在启动 npm start

时遇到此错误

SyntaxError: : Unexpected token (1:1)
> 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    |  ^

【问题讨论】：

是否还有其他加载器也加载.svg？例如：babel-loader
我已经为 jsx 文件配置了 babel 加载器：{ test: /\.jsx*$/, exclude: [/node_modules/, /.+\.config.js/], loader: 'babel', }
我没有其他 .svg 文件的加载器
你在使用 webpack 进行服务端渲染吗？
是的，我有一个包含此条目的 webpack.config.server.js 文件：, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i, loader: 'null-loader', },

【解决方案1】：

您必须删除 SVG 顶部的 <?xml ...。它不需要渲染 SVG，并且在尝试解析时经常在 webpack 中抛出错误。

【讨论】：