使用Vite与vite-plugin-html-purgeCSS构建时配置加载失败报错

错误信息 #

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)

环境信息 #

• Node.js 版本：16.17.0
• 构建工具：Vite
• 无前端框架
• 已引入vite-plugin-html-purgecss插件用于PurgeCSS

已尝试的配置文件 #

配置一 #

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

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

配置二 #

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

export default {
    plugins: [
        htmlPurge()
    ]
}

解决方案 #

报错核心原因是导入方式错误：vite-plugin-html-purgecss采用命名导出而非默认导出，需修改导入语句适配插件的导出规则。

正确配置示例 #

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

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

额外排查步骤 #

1. 确认插件已正确安装，执行命令重新安装：

npm install vite-plugin-html-purgecss --save-dev

2. 若问题仍存在，可删除node_modules和package-lock.json（或yarn.lock）后重新安装所有依赖。

内容的提问来源于stack exchange，提问作者amuilne