unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.84k stars 352 forks source link

When I used the custom SVG icon in the webpack 5 project, I found that the webpack did not parse the files correctly #672

Open cMing1997 opened 1 year ago

cMing1997 commented 1 year ago

Describe the bug

When I used plugin-auto-import in my webpack5 project, I found that the custom svg icon component failed to be packaged, with the following error: image

When I moved the custom SVG icon component out of the component auto-registration directory, everything was fine.

Configuration for my webpack::

const autoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');

module: {
    rules: [
        {
            test: /\.svg$/,
            include: [utils.resolve("components/SvgIcon/icon")],
            use: [{
                loader: 'svg-sprite-loader',
                options: {
                    symbolId: '[name]'
                }
            }],
        },
    ]
},
plugins: [
    autoImport({
        imports: [
            'vue',
            'vue-router',
        ],
        eslintrc: {
            enabled: true,
        },
    }), //自动导入第三方库
    Components({
        directives: false, // 默认为 true 表示为vue3 false 为vue2
    }),  //自动导入第三方组件或者自定义组件
]

Reproduction

no

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 17.92 GB / 31.73 GB
  Binaries:
    Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.2070.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Validations

lishaobos commented 1 year ago

hi, need reproduction