Webpack 无法使用 `<svg`> 标签导入 React 组件答案

【问题标题】：Webpack not able to import React component with `<svg`> tagWebpack 无法使用 `<svg`> 标签导入 React 组件
【发布时间】：2019-10-23 18:16:36
【问题描述】：

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

【问题讨论】：

标签： reactjs svg webpack

【解决方案1】：

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

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

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

如果我在 react-svg-main 项目中进行一些更改，我想我可以让它工作......

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

【讨论】：