unplugin / unplugin-vue-components

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

unpluginName error in other plugin #250

Closed jimxjim closed 2 years ago

jimxjim commented 2 years ago

node version: 14.17.5 webpack version: 5.65.0 unplugin-vue-components version: 0.17.8

It occured several errors like below:

ERROR in ./src/components/common/HButton.vue?vue&type=style&index=0&id=e5d0b650&lang=scss&scoped=true (./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[16].use[0]!./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-3.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/windicss-webpack-plugin/dist/loaders/windicss-template.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/common/HButton.vue?vue&type=style&index=0&id=e5d0b650&lang=scss&scoped=true)
Module build failed (from ./node_modules/unplugin/dist/webpack/loaders/transform.js):
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'unpluginName'. These properties are valid:
   object { publicPath?, emit?, esModule?, layer? }
    at validate (/Users/jim/Work/bincentive/hotpot-finance-client/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.getOptions (/Users/jim/Work/bincentive/hotpot-finance-client/node_modules/webpack/lib/NormalModule.js:578:19)
    at Object.pitch (/Users/jim/Work/bincentive/hotpot-finance-client/node_modules/mini-css-extract-plugin/dist/loader.js:38:24)
 @ ./src/components/common/HButton.vue?vue&type=style&index=0&id=e5d0b650&lang=scss&scoped=true 1:38-632 1:38-632
 @ ./src/components/common/HButton.vue 5:0-79
 @ ./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[16].use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./node_modules/windicss-webpack-plugin/dist/loaders/windicss-template.js!./src/views/Exchange.vue?vue&type=template&id=3f3538df&scoped=true
 @ ./src/views/Exchange.vue?vue&type=template&id=3f3538df&scoped=true 1:38-426 1:38-426
 @ ./src/views/Exchange.vue 1:38-119 8:68-74
 @ ./src/router/index.js
 @ ./src/main.js 4:0-29 14:8-14

my webpack module rules:

        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                include: [resolve('src')]
            },
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 10000,
                            outputPath: assetsPath('img'),
                            name: '[name].[hash:7].[ext]',
                            esModule: false
                        }
                    }
                ],
                type: 'javascript/auto'
            }
        ]

And I didn't set options in unplugin-vue-components.

These error show at the file use component by auto import and component itself. I built successfully last week, but this week didn't.

ZaneL1u commented 2 years ago

I also encountered the same problem.

sxzz commented 2 years ago

We temporarily close this due to the lack of enough information. Please provide a minimal reproduction to reopen the issue. Thanks.

https://antfu.me/posts/why-reproductions-are-required