create-react-app 和 svgr 的 webpack 错误

Question

我使用 create-react-app 创建了 react 应用程序，2 天前我运行npm run eject我将@svgr/webpack添加到项目中，当时它运行良好。 我只是回来做一些未完成的工作，但是当我运行yarn start ，它显示在命令中的错误：

options/query provided without loader (use loader + options) in {
  "test": [
    {},
    {},
    {},
    {},
    {}
  ],
  "use": [
    "@svgr/webpack",
    "url-loader"
  ],
  "options": {
    "limit": 10000,
    "name": "static/media/[name].[hash:8].[ext]"
  }
}

按照我将 webpack.config.js 更改为的错误消息

{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
  loader: ['@svgr/webpack', 'url-loader'],
    options: {
      limit: imageInlineSizeLimit,
      name: 'static/media/[name].[hash:8].[ext]',
    },
  },

然后它显示

options/query cannot be used with loaders (use options for each array item) in {
  "test": [
    {},
    {},
    {},
    {},
    {}
  ],
  "loader": [
    "@svgr/webpack",
    "url-loader"
  ],
  "options": {
    "limit": 10000,
    "name": "static/media/[name].[hash:8].[ext]"
  }
}

任何人都有解决此问题的方法。

Github 问题

Answer 1

尝试将您的配置更改为

{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
  use: [{
    loader: '@svgr/webpack',
    options: {
      limit: imageInlineSizeLimit,
      name: 'static/media/[name].[hash:8].[ext]',
    }
  },
  {
    loader: 'url-loader'
  }]      
},