Tailwindcss报错:没有与此调用匹配的重载

查看我的博客更清晰和详细

报错

背景:使用 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 官方文档:

How peers are resolved | pnpm

如果一个包所处的伴生依赖(peer)环境稍有差异,pnpm 就会在 .pnpm 下为它各建一个专属的隔离文件夹

流程:

刚创建项目

  • 刚初始化的 electron-vite 模板非常干净,环境里只有 ESLint 带来的 jiti
  • 此时 Vite 环境里只有 nodejiti
  • 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

这属于纯构建期的类型假阳性报警,完全不影响项目运行与打包

相关推荐
晴天161 小时前
Chrome WebMCP 让网站学会向 AI「自我介绍」
前端·人工智能·chrome
雪芽蓝域zzs1 小时前
二十一节:进阶:用户列表批量删除功能
前端·javascript·vue.js
研☆香1 小时前
可选链运算符和空值合并运算符的使用
前端·javascript·vue.js
leeyi1 小时前
SSE 到了浏览器会怎样:解析、重连与中止(第105篇)
前端
雪芽蓝域zzs1 小时前
第二十七节:进阶:路由权限控制 + 404 / 401 全局异常页面开发
前端·javascript·html
风骏时光牛马1 小时前
稳定性治理与疑难问题深度分析实践
前端
艾莉丝努力练剑2 小时前
【AI大模型接入SDK】ChatGPT API
网络·c++·人工智能·websocket·网络协议·学习·chatgpt
无小道3 小时前
C/C++——atomic小记
c++·cas·无锁
梦曦i10 小时前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app