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 环境里只有 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

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

相关推荐
去伪存真1 小时前
AI Agent Harness 深度测评与技术选型实战
前端·agent
wo_jack2 小时前
C++ 入门笔记(十六):第16课 vector 模拟实现十问十答 —— 从三指针到迭代器失效
c++·后端·面试·stl·vector
D e re k ZH3 小时前
C++ 标准库算法全景指南
数据结构·c++·算法
FRing034 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
雪落漂泊4 小时前
C++算法 二分查找篇(上)
开发语言·c++·算法
不会算法的笨小孩5 小时前
异常的使用以及会出现的问题
开发语言·c++·c++11·异常
疯华整猫7 小时前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
Hhy_11078 小时前
《C++深度解构06》手撕 string —— 从底层内存管理到深浅拷贝彻底吃透
c语言·开发语言·c++·学习·visual studio
青少儿编程课堂8 小时前
蓝桥杯青少组图形化省考报名倒计时·全国青少年信息素养大赛·电子学会图形化考级:校园黑白棋人机对战解析
c++·python·算法·bfs·信息学竞赛
YSL0701248 小时前
C++基础
开发语言·c++