Purgecss: errored on @vue/cli 4.2.3

[zerjioang]

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?

[diego-lipinski-de-castro]

I am waiting on this one too...

[ishowman]

The same error https://github.com/FullHuman/purgecss/issues/320#issuecomment-611839775

[kashirin-dm]

The same (((

[bosemian]

I'm waiting the solution.

[denOldTimer]

Aah this is where I have to be, oeps.
Got the same issue.
#320 (comment)

[MatanYadaev]

same here

[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.

[denOldTimer]

At the moment I'm working without vue-cli-plugin-purge and just strait up the original postcss-purge
and Tailwindcss I've run a few production modes builds and my scss file goes from Megabyte to kilobytes and after inspection, only the tailwind assigned is found in the production css bundle.
So I'm not totally bummed out.
Still cool if it worked, thanks

[SocolaDaiCa]

the same, haiz

[vasilievruslan]

Same Cannot find module '@fullhuman/vue-cli-plugin-purgecss'

[Wharley01]

having same issue!

[bbugh]

The installation itself works, but the package isn't working. A PR was merged 5 days ago that fixes this, hopefully they'll do an official release soon since it's currently unusable without a hack.

If you install the plugin and then manually edit your node_modules/@fullhuman/vue-cli-plugin-purgecss folder to apply this commit it will work.

[BroJenuel]

I tried something it it worked.
I installed the purge globalally and then in my project I run Vue add @fullhuman/purgecss and it installed successfully