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: (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升级到了最新版本。

Answer 1

这个问题与 babel/webpack 如何处理 SVG 无关，但这是因为（Expo？）webpack 配置由于配置设置（react-svg-main ).

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

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

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

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

Webpack无法导入带有<svg`>标签的

1 个答案: