CODEWITHSUNDEEP
node.jsvite
amuilne
amuilne

Reputation: 1

Vite & Vite-plugin-html-purgeCSS: failed to load config, error during build

I'm using Vite as the build tool for a project and added the plugin "vite-plugin--html-purgecss" to use PurgeCSS. However on build I get the following error:

    failed to load config from C:\Users\User Name\Documents\GitHub\project-template\vite.config.js
    error during build:
    TypeError: htmlPurge is not a function
        at file:///C:/Users/User%20Name/Documents/GitHub/project-template/vite.config.js.timestamp-1663917972492.mjs:6:5
        at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
        at async Promise.all (index 0)
        at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
        at async loadConfigFromBundledFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63470:21)
        at async loadConfigFromFile (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:63356:28)
        at async resolveConfig (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:62973:28)
        at async doBuild (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45640:20)
        at async build (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/chunks/dep-cff57044.js:45629:16)
        at async CAC.<anonymous> (file:///C:/Users/User%20Name/Documents/GitHub/project-template/node_modules/vite/dist/node/cli.js:748:9)

Vite.config.js is defined at the root of the project, and am running node 16.17.0. The template project isn't running any frameworks.

I've tried two config files:

import { defineConfig } from 'vite'
import htmlPurge from 'vite-plugin-html-purgecss'

export default defineConfig({
    plugins: [
        htmlPurge()
    ]
})

and

import htmlPurge from 'vite-plugin-html-purgecss'

export default {
    plugins: [
        htmlPurge()
    ]
}

Upvotes: 0

Views: 2940

Answers (1)

Nick Pino
Nick Pino

Reputation: 51

I had the same issue. I think it's a compatibility issue or an update that no longer supports that plugin. Try running the following:

npm install vite-plugin-purgecss -D

vite.config.js file:

import { defineConfig } from "vite";    
import htmlPurge from 'vite-plugin-purgecss';


export default defineConfig({
    plugins: [
        htmlPurge([htmlPurge()]),
    ],
});

Let me know if that works for you.

Upvotes: 5

Related Questions