使用@svgr/webpack在React组件导入SVG时编译报错求助

我正在使用@svgr/webpack包加载SVG资源，在React组件中按如下方式导入SVG：

import { close } from '../../../resources/icons/icon-close.svg';

我的webpack.config配置文件如下：

require('dotenv').config();

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const SOURCE_ROOT = `${__dirname}/src`;

const jsRules = {
  test: /\.(js|jsx)$/,
  include: /src/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

const styleRules = {
  test: /\.s?css$/,
  use: [
    {
      loader: 'style-loader',
      options: { injectType: 'singletonStyleTag' },
    },
    'css-loader',
    'postcss-loader',
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        /* Every resource will be loaded for every scss file that is imported, so be careful to only
        place files here that don't generate any CSS on their own (like variables & mixins). */
        resources: [
          'src/styles/variables.scss',
          'src/styles/mixins.scss',
          'node_modules/@myproj/foundation-library/colors/colors.scss',
          'node_modules/@myproj/foundation-library/essential/break-points.scss',
          'node_modules/@myproj/foundation-library/essential/borders.scss',
          'node_modules/@myproj/foundation-library/fonts/mixins/heading-styles.scss',
          'node_modules/@myproj/foundation-library/fonts/mixins/text-styles.scss',
          'node_modules/@myproj/foundation-library/fonts/variables/common-variables.scss',
          'node_modules/@myproj/foundation-library/fonts/variables/desktop-variables.scss',
          'node_modules/@myproj/foundation-library/fonts/variables/mobile-variables.scss',
          'node_modules/@myproj/foundation-library/spacing/spacing.scss',
        ],
      },
    },
  ],
};

const imageRules = {
  test: /\.(jpg|png)$/,
  loader: 'file-loader',
  options: {
    name: '[path][name].[hash].[ext]',
  },
};

const svgRules = {
  test: /\.svg$/,
  issuer: /\.(js)x?$/,
  use: {
    loader: '@svgr/webpack',
    options: {
      svgoConfig: {
        plugins: [{ cleanupIDs: true }],
      },
    },
  },
};

const pseudoSvgRules = {
  test: /\.svg$/,
  issuer: /\.s[ac]ss$/i,
  loader: 'file-loader',
  options: {
    name: '[path][name].[hash].[ext]',
  },
};

module.exports = (env) => {
  const writeToDisk = env && Boolean(env.writeToDisk);

  return {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: ['@babel/polyfill', './src/index.jsx'],
    devServer: {
      hot: true,
      port: 8080,
      open: true,
      proxy: [
        {
          context: ['/content', '/etc.clientlibs', '/etc/designs'],
          target: 'http://localhost:4502',
        },
      ],
      liveReload: !writeToDisk,
    },
    module: {
      rules: [jsRules, styleRules, imageRules, svgRules, pseudoSvgRules],
    },
    output: {
      filename: (chunkData) => {
        return chunkData.chunk.name === 'dependencies'
          ? 'clientlib-dependencies/[name].js'
          : 'clientlib-site/[name].js';
      },
      path: path.resolve(__dirname, 'dist'),
    },
    resolve: { extensions: ['.js', '.jsx'] },
    plugins: [
      new CleanWebpackPlugin(),
      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, `${SOURCE_ROOT}/resources`),
            to: './clientlib-site/',
          },
        ],
      }),
      new HtmlWebpackPlugin({
        template: 'src/index.html',
      }),
      new MiniCssExtractPlugin({
        filename: 'clientlib-site/[name].css',
        chunkFilename: 'clientlib-dependencies/[name].css',
      }),
      new StyleLintPlugin({
        configFile: '.stylelintrc.json',
        context: 'src',
        files: '**/*.scss',
        failOnError: false,
        quiet: false,
        emitErrors: true,
      }),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
    ],
    stats: {
      assetsSort: 'chunks',
      builtAt: true,
      children: false,
      chunkGroups: true,
      chunkOrigins: true,
      colors: false,
      errors: true,
      errorDetails: true,
      env: true,
      modules: false,
      performance: true,
      providedExports: false,
      source: false,
      warnings: true,
    },
  };
};

编译项目时出现如下错误：

ERROR in ./src/resources/icons/icon-close.svg
Module build failed (from ./node_modules/@svgr/webpack/dist/index.js):
Error: Plugin name should be specified
    at resolvePluginConfig (/Users/……………../node_modules/svgo/lib/svgo/config.js:113:13)
    at Array.map (<anonymous>)
    at optimize (/Users/……………../node_modules/svgo/lib/svgo.js:50:37)
    at Object.optimize (/Users/……………../node_modules/svgo/lib/svgo-node.js:97:10)
    at svgoPlugin (/Users/……………../node_modules/@svgr/plugin-svgo/dist/index.js:75:23)
    at run (/Users/……………../node_modules/@svgr/core/dist/index.js:176:16)
    at Object.transform (/Users/……………../node_modules/@svgr/core/dist/index.js:182:10)
    at async /Users/……………../node_modules/@svgr/webpack/dist/index.js:71:18
 @ ./src/components/Contact.jsx 4:0-64 49:20-25

错误原因是SVGO的插件配置格式不符合新版本要求，新版本需要明确指定插件的name字段，不能直接使用键值对格式。

修改webpack配置中的svgRules部分，将svgoConfig的plugins数组调整为以下格式：

const svgRules = {
  test: /\.svg$/,
  issuer: /\.(js)x?$/,
  use: {
    loader: '@svgr/webpack',
    options: {
      svgoConfig: {
        plugins: [
          {
            name: 'cleanupIDs',
            active: true
          }
        ],
      },
    },
  },
};

如果只需启用插件的默认配置，也可以简化为：

svgoConfig: {
  plugins: [
    'cleanupIDs'
  ],
}

修改后重新编译，即可解决该错误。

内容的提问来源于stack exchange，提问作者Farzaneh Torkpichlou