У меня есть стандартный функциональный компонент 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, где он должен был быть.
Сейчас я пытаюсь использовать это в другом проекте с пользовательской настройкой веб-пакета. Но я получаю ошибку;
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}>
Я предполагаю, что мне нужен загрузчик веб-пакетов, который может их поддерживать, мои существующие настройки веб-пакетов для JS / JSX / SVG
{
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: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
Мой конфиг .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 и его плагины до последних версий заранее.