查看我的博客更清晰和详细
报错
背景:使用 electron-vite 构建项目,然后安装 tailwindcss,在electron.vite.config.ts中配置插件

类似 issue
tailwindcss 具体 issue
这个 issue 的作者使用 SolidStart 框架,然后安装 @tailwindcss/vite:框架内部自带了一套 Vite 体系,而外部新安装的插件自带了另一套 Vite 体系

但我的项目中
Found 1 version of vite (全工程只找到了 1 个版本的 vite,那就是顶部的 7.3.6)
Found 1 version of rollup (全工程也只有 1 个版本的 rollup,那就是 4.63.1)

我的报错消息
把关键的地方已经加粗标记
没有与此调用匹配的重载。 最后一个重载给出了以下错误。 不能将类型 "Plugin\[\]" 分配给类型 "PluginOption"。 不能将类型 "Plugin\[\]" 分配给类型 "PluginOption \[\]"。 不能将类型 "Plugin" 分配给类型 "PluginOption"。 不能将类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.2_46041a9d4deccce9f9aaf674d7cdda12/node_modules/vite/dist/node/index").Plugin" 分配给类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.20.1_jiti@2.7.0/node_modules/vite/dist/node/index").Plugin"。 属性 "hotUpdate" 的类型不兼容。 类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").ObjectHook<(this: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {...;}, options: import ("D:/Code/Demo/electron-vite-demo/nod..." 无法分配给类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").ObjectHook<(this: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {...;}, options: import ("D:/Code/Demo/electron-vite-demo/nod..."。存在具有此名称的两种不同类型,但它们是不相关的。 不能将类型 "(this: MinimalPluginContext & {environment: DevEnvironment;}, options: HotUpdateOptions) => void | EnvironmentModuleNode \[\] | Promise<...>" 分配给类型 "ObjectHook<(this: MinimalPluginContext & {environment: DevEnvironment;}, options: HotUpdateOptions) => void | EnvironmentModuleNode \[\] | Promise<...>> | undefined"。 不能将类型 "(this: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {...;}, options: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.2_46041a9d4deccce9f9aaf674d7cdda12/node_modules/vite/dist/node/index").HotUp..." 分配给类型 "(this: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {...;}, options: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.20.1_jiti@2.7.0/node_modules/vite/dist/node/index").HotUpdateOptions) => voi..."。 每个签名的 "this" 类型不兼容。 不能将类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {environment: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.20.1_jiti@2.7.0/node_modules/vite/dist/node/index").DevEnvironment;}" 分配给类型 "import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/rollup@4.63.1/node_modules/rollup/dist/rollup").MinimalPluginContext & {environment: import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.2_46041a9d4deccce9f9aaf674d7cdda12/node_modules/vite/dist/node/index").DevEnvironment;}"。 不能将类型 "MinimalPluginContext & {environment: DevEnvironment;}" 分配给类型 "{environment: DevEnvironment;}"。 在这些类型中,"environment.pluginContainer" 的类型不兼容。 不能将类型 "EnvironmentPluginContainer<import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.20.1_jiti@2.7.0 /node_modules/vite/dist/node/index").DevEnvironment>" 分配给类型 "EnvironmentPluginContainer<import ("D:/Code/Demo/electron-vite-demo/node_modules/.pnpm/vite@7.3.6_@types+node@22.2_46041a9d4deccce9f9aaf674d7cdda12 /node_modules/vite/dist/node/index").DevEnvironment>"。 类型具有私有属性 "_pluginContextMap" 的单独声明。
产生原因
pnpm 官方文档:
如果一个包所处的伴生依赖(peer)环境稍有差异,pnpm 就会在
.pnpm下为它各建一个专属的隔离文件夹
流程:
刚创建项目
- 刚初始化的
electron-vite模板非常干净,环境里只有 ESLint 带来的jiti - 此时 Vite 环境里只有
node和jiti - pnpm 便给它建了环境 A:
vite@7.3.6_@types+node@22.20.1_jiti@2.7.0
安装 tailwind css
- 执行
pnpm add tailwindcss @tailwindcss/vite时: Tailwind CSS v4 的底层核心编译引擎正是lightningcss它顺带把lightningcss@1.32.0安装进了项目 - 此时对 Vite 来说是个全新的环境,所以 pnpm 把三者算成了一串新哈希,为它创建了环境 B:
vite@7.3.6_@types+node@22.2_46041a9d...
同一个包由于包管理器安装成了两份物理文件,导致私有属性跨文件比对失败,引发报错
解决
-
在插件上方加上
// @ts-expect-error -
或直接断言
tailwindcss() as any
这属于纯构建期的类型假阳性报警,完全不影响项目运行与打包