create-react-app 和 svgr 的 webpack 错误

Question

I created react app by using create-react-app and 2 days ago i run npm run eject follows by i added @svgr/webpack into project it was working perfectly at the time. I just get back to do some undone work, but when i run yarn start the error it's showed in the command:

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]"
  }
}

follow the error message i change webpack.config.js to

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

it then shows

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]"
  }
}

Anybody have the workaround to solve this problem.

Github issues

Answer 1

Try changing your configuration to

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