使用create-react-app和svgr的webpack错误

时间:2019-12-30 17:41:49

标签: javascript reactjs webpack create-react-app

我通过使用create-react-app创建了react应用,两天前我运行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]"
  }
}

任何人都有解决此问题的解决方法。预先感谢!

1 个答案:

答案 0 :(得分:0)

尝试将配置更改为

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