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

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

相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
倒头就睡的小比特4 天前
算法竞赛C++常用的STL
c++·算法
weilx12344 天前
C++笔记-文件IO-<fcntl.h>
c++
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
Smileyqp沛沛4 天前
前端?C++ ?较大差异基础罗列
c++·基础·前端转c++
C语言小火车4 天前
C/C++ 为什么需要编译器?
开发语言·c++