ant-design-mobile: ERROR in ../../node_modules/antd-mobile/es/assets/slider-thumb.svg

Version of antd-mobile

5.0.0-beta.16

Operating system and its version

iOS, Android

Browser and its version

Chrome v96.0.4664.45

Sandbox to reproduce

No response

What happened?

svg-sprite-loader@6.0.0

There is some problems when using svg-sprite-loader , if you already using svg in your project, and configure svg-sprite-loader in your webpack, when using some components i.e Slider, an error will throw out through webpack and says “ERROR in …/…/node_modules/antd-mobile/es/assets/slider-thumb.svg”

And I was trying to exclude node_modules in the config file, and then I got an .svg file that need an loader problem

在使用了svg-sprite-loader，导致一些组件在使用 svg 作为icon的时候报错 "ERROR in ../../node_modules/antd-mobile/es/assets/slider-thumb.svg" , 如果把 node_modules 排出的话，又报 .svg 需要一个 loader 的错误

Relevant log output

ERROR in ../../node_modules/antd-mobile/es/assets/slider-thumb.svg
Module build failed (from ../../node_modules/svg-sprite-loader/lib/loader.js):
ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin
    at Object.loader (D:\Sunglink\OSAP-SSP\node_modules\svg-sprite-loader\lib\loader.js:47:13)
 @ ../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/antd-mobile/es/components/slider/slider.css 5:0-74 7:73-102


and in webpack config

```js
{
    test: /\.svg$/,
    use: ['svg-sprite-loader'],
},



### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (11 by maintainers)

Most upvoted comments

{
    test: /node_modules\/.+\.svg$/,
    use: {
        loader: 'file-loader',
    },
},
{
    test: /\.svg$/,
    use: {
        loader: 'svg-sprite-loader',
        options: {
            exclude: [/node_modules/],
        },
    },
},

这个配置不生效是因为你是Windows，路径问题，可以将file-loader的test设置成/node_modules[\\/].+\.svg$/。然后就是exclude字段写在options里好像是没有用的，写在外面就有用了。所以可以写成下面这样：

{
  test: /node_modules[\\/].+\.svg$/,
  use: "file-loader",
},
{
  test: /\.svg$/,
  exclude: /node_modules/,
  use: "svg-sprite-loader",
},

或者这样吧

{
  test: /\.svg$/,
  exclude: /node_modules/,
  use: "svg-sprite-loader",
},
{
  test: /\.svg$/,
  include: /node_modules/,
  use: "file-loader",
},

zzzgydi on Dec 9, 2021