Webpack не может импортировать компонент React с помощью `тег - PullRequest
1 голос
/ 08 июня 2019

У меня есть стандартный функциональный компонент 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 и его плагины до последних версий заранее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...