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'
  }]      
},