errored on @vue/cli 4.2.3

Environment

Vuejs: ^2.6.11 Vue CLI: 4.2.3 Yarn: v1.22.4

Installed packages

• @fullhuman/postcss-purgecss: ^2.1.0"
• @fullhuman/vue-cli-plugin-purgecss: ~2.1.0"
• @kazupon/vue-i18n-loader: ^0.3.0"
• @vue/cli-plugin-babel: ~4.3.0"
• @vue/cli-plugin-eslint: ~4.3.0"
• @vue/cli-plugin-pwa: ~4.3.0"
• @vue/cli-plugin-router: ~4.3.0"
• @vue/cli-plugin-vuex: ~4.3.0"
• @vue/cli-service: ~4.3.0"
• babel-eslint: ^10.1.0"
• eslint: ^6.7.2"
• eslint-plugin-vue: ^6.2.2"
• purgecss: ^2.1.2"
• sass: ^1.26.3"
• sass-loader: ^8.0.2"
• terser-webpack-plugin: ^2.3.5"
• vue-cli-plugin-i18n: ~0.6.1"
• vue-cli-plugin-webpack-bundle-analyzer: ~2.0.0"
• vue-template-compiler: ^2.6.11

Description

After adding to existing vue project the plugin via vue add @fullhuman/purgecss and configuring the file vue.config.js with following content

const purgecss = require("@fullhuman/vue-cli-plugin-purgecss")

module.exports = {
    runtimeCompiler: false,
    productionSourceMap: false,
    pages: {
        index: {
            // entry for the page
            entry: 'src/main.js',
            // the source template
            template: 'public/index.html',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Title',
            // chunks to include on this page, by default includes
            // extracted common chunks and vendor chunks.
            chunks: []
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
                purgecss({
                    content: [
                        './public/**/*.html',
                        "./src/**/*.vue"
                    ],
                    defaultExtractor(content) {
                        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
                        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
                    },
                    whitelist: ["html", "body"],
                    whitelistPatternsChildren: [/^token/, /^pre/, /^code/],
                })
            );
        }
    }
}

I execute vue-cli-service build and I get the following error:

yarn run v1.22.4
$ vue-cli-service build
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module '@fullhuman/vue-cli-plugin-purgecss'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at idToPlugin (/projects/template/node_modules/@vue/cli-service/lib/Service.js:160:14)
    at Object.keys.concat.filter.map.id (/projects/template/node_modules/@vue/cli-service/lib/Service.js:199:20)
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/projects/template/node_modules/@vue/cli-service/lib/Service.js:185:10)
    at new Service (/projects/template/node_modules/@vue/cli-service/lib/Service.js:47:25)
    at Object.<anonymous> (/projects/template/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What am I missing?

[Ffloriel]

It looks like new versions of vue-cli are acting like vue-cli-plugin-purgecss is a vue-cli service. And so is trying to fetch it when building. I don’t see a solution to this issue on this end.

I’ll look at the vue-cli repository and add an issue to see it is or not an issue with vue-cli.

[bosemian]

I’m waiting the solution.