pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理

在 monorepo 项目架构下,不同的仓库可能安装的 vite 版本是不同的, 有一些历史的老项目, 随着业务的变化,也有新的项目使用 最新的 vite@7.x 等初始化项目

比如, 我们可能在下面的代码片段中会出现 如下的 ts警告

ts 复制代码
const loadEnv = (mode: string) => {
    const envFiles = ["./env/.env", `./env/.env.${mode}`];

    const env: any = {};
    envFiles.forEach(envFile => {
        const loadedEnv = dotenv.config({ path: envFile, override: true });
        if (loadedEnv.error) {
            console.error(`环境变量文件加载失败 ${envFile}`);
        } else {
            Object.assign(env, loadedEnv.parsed || {});
        }
    });

    return env;
};

export default defineConfig(({ mode }: { mode: string }) => {
    console.log('当前环境:', mode);

    const globalEnv = loadEnv(mode)
    
     return {
      ...
     }
     
});

mode 的类型就会报错。

less 复制代码
没有与此调用匹配的重载。  
最后一个重载给出了以下错误。  
类型"({ mode }: ConfigEnv) => { define: { "process.env": Record<string, string>; }; plugins: (PluginOption | Plugin<any> | Plugin<any>[])[]; base: string; ... 4 more ...; css: { ...; }; }"的参数不能赋给类型"UserConfigExport"的参数。  
不能将类型"({ mode }: ConfigEnv) => { define: { "process.env": Record<string, string>; }; plugins: (PluginOption | Plugin<any> | Plugin<any>[])[]; base: string; ... 4 more ...; css: { ...; }; }"分配给类型"UserConfigFnObject"。  
调用签名返回类型 "{ define: { "process.env": Record<string, string>; }; plugins: (PluginOption | Plugin<any> | Plugin<any>[])[]; base: string; resolve: { alias: { "@": string; }; }; build: { ...; }; esbuild: { ...; }; server: { ...; }; css: { ...; }; }" 和 "UserConfig" 不兼容。  
在这些类型中,"plugins" 的类型不兼容。  
不能将类型"(PluginOption | Plugin<any> | Plugin<any>[])[]"分配给类型"PluginOption[]"。  
不能将类型"PluginOption | Plugin<any> | Plugin<any>[]"分配给类型"PluginOption"。  
不能将类型"Plugin<any>"分配给类型"PluginOption"。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").Plugin<any>"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").Plugin<any>"。  
属性"apply"的类型不兼容。  
不能将类型""build" | "serve" | ((this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da89]()..."分配给类型""build" | "serve" | ((this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bf]()..."。  
不能将类型"(this: void, config: UserConfig, env: ConfigEnv) => boolean"分配给类型""build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean)"。  
不能将类型"(this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/nod..."分配给类型"(this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/nod..."。  
参数"config"和"config" 的类型不兼容。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig"。  
属性"plugins"的类型不兼容。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").PluginOption[]"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").PluginOption[]"。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").PluginOption"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").PluginOption"。  
不能将类型"Plugin<any>"分配给类型"PluginOption"。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").Plugin<any>"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").Plugin<any>"。  
属性"apply"的类型不兼容。  
不能将类型""build" | "serve" | ((this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bf]()..."分配给类型""build" | "serve" | ((this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da89]()..."。  
不能将类型"(this: void, config: UserConfig, env: ConfigEnv) => boolean"分配给类型""build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean)"。  
不能将类型"(this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/nod..."分配给类型"(this: void, config: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig, env: import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/nod..."。  
参数"config"和"config" 的类型不兼容。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").UserConfig"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").UserConfig"。  
属性"plugins"的类型不兼容。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").PluginOption[]"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").PluginOption[]"。  
不能将类型"import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").PluginOption"分配给类型"import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").PluginOption"。  
不能将类型"Promise<false | Plugin<any> | PluginOption[]>"分配给类型"PluginOption"。  
不能将类型"Promise<false | import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").Plugin<any> | import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_module..."分配给类型"Promise<false | import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").Plugin<any> | import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_module..."。  
不能将类型"false | import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/dist/node/index").Plugin<any> | import("D:/work/test-web/node_modules/.pnpm/[vite@5.4.1]()9_@[types+node@24._c928461cc00da890efe4f1ccdfab0111]()/node_modules/vite/d..."分配给类型"false | import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/dist/node/index").Plugin<any> | import("D:/work/test-web/node_modules/.pnpm/[vite@6.3]().5_@[types+node@24.0_3221e9d8a7877bfd9756da51f493fce4]()/node_modules/vite/d..."。  
不能将类型"Plugin<any>"分配给类型"false | Plugin<any> | PluginOption[]"。

原因

项目中出现了 vite 5.x 和 vite 6.x 不同的版本。

简单的查看一下,看是否可以做适当的升级,或者将 vite 统一提升到 root 层。 子包中 不使用 vite 依赖。

相关推荐
中微子8 分钟前
React 状态管理 源码深度解析
前端·react.js
加减法原则1 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele2 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4532 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友2 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir2 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead3 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua4 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf