我有一个标准的 React 功能组件,它导出一个 SVG;
SomeSVG.js
import React from 'react';
const SomeSVG = props => (
<svg width={24} height={24} {...props}>...</svg>
)
export default SomeSVG;
在 Create React App 中使用它时,效果很好。漂亮的内联 SVG,符合预期。
现在我正尝试在另一个项目中使用它,使用自定义的 webpack 设置。但是我得到了错误;
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const SomeSVG = props => (
> <svg width={24} height={24} {...props}>
我想我需要一个 webpack 加载器来支持这些,我现有的 JS/JSX/SVG webpack 设置
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader?cacheDirectory=true',
'eslint-loader'
]
},
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: 'assets_seller/[name].[ext]'
}
},
(我不认为 SVG 部分是相关的,但为了完整性我会把它包括在内)
我已经尝试过将 react-svg-loader
作为加载器,有和没有选项;
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader?cacheDirectory=true',
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
},
'eslint-loader'
]
},
但是那个错误也是如此
NonErrorEmittedError:(发出的值而不是 Error 的实例)解析 SVG 时出错:第一个标记前的非空白。
我的 .babelrc 配置
{
"presets": [
[
"@babel/preset-env", {
"modules": false
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"transform-async-to-generator",
"syntax-dynamic-import",
"universal-import",
"@babel/plugin-transform-exponentiation-operator"
]
}
如有任何想法,我们将不胜感激。
编辑:我事先将 Webpack 及其插件升级到最新版本。
最佳答案
这个问题与 babel/webpack 如何处理 SVG 无关,但这是因为(Expo?)webpack 配置它没有从 react-svg-main
包转换 JSX 因为配置设置(webpack.config.js
)。
此外,当您将它添加到列表中时,编译过程完成,但组件在运行时不存在,因为不包含依赖项并且它永远不会在此环境中工作(尝试导入错误:'SvgXml'是未从 react-native-svg
中导出)。
我将尝试更新此响应并向受影响的项目发送拉取请求。
我想如果我在 react-svg-main
项目中做一些改变我可以让这个工作...
就我而言,这是在尝试使用网络/浏览器运行 Expo 项目时出现的问题。
关于reactjs - Webpack 无法导入带有 `<svg` > 标记的 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56507880/
相关文章:
angular - 在 ngrx effect angular 中做某事之前等待两个序列 Actio
python - "pyenv virtualenvwrapper"是做什么的?
tensorflow - 基于直方图定义 TF 中的损失函数
google-chrome-extension - Chrome 扩展存储 onChanged()
typescript - Promise.resolve(null) 的目的是什么
.net-core - 错误 UseHealthChecksUI 遇到意外字符
design-patterns - 没有 dbcontext 时的工作单元模式
angular - 我的 Angular 应用程序的规模(缩放)在生产中单独增加