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

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

相关推荐
zhanghaha13141 小时前
C++构造函数的一些其他应用(逐词逐句保姆讲解)
c++
java1234_小锋2 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
jimy12 小时前
c++的 Type Traits (二、更详细版本)
开发语言·c++
鶴哥只手遮天2 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方2 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户530429765792 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain3 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts3 小时前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端
大孜然3 小时前
孜然QQ频道自动化程序机器人配置教程
前端
用户469384921553 小时前
AIUI 焦点高亮切换失效排查与规避:为什么按钮不变换形态呢?
前端