reactjs - Webpack 无法导入带有 ` 标记的 React 组件

Question

我有一个标准的 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 及其插件升级到最新版本。

Answer 1

这个问题与 babel/webpack 如何处理 SVG 无关，但这是因为(Expo？)webpack 配置它没有从 react-svg-main 包转换 JSX 因为配置设置(webpack.config.js)。

此外，当您将它添加到列表中时，编译过程完成，但组件在运行时不存在，因为不包含依赖项并且它永远不会在此环境中工作(尝试导入错误:'SvgXml'是未从 react-native-svg 中导出)。

我将尝试更新此响应并向受影响的项目发送拉取请求。

我想如果我在 react-svg-main 项目中做一些改变我可以让这个工作...

就我而言，这是在尝试使用网络/浏览器运行 Expo 项目时出现的问题。