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 依赖。

相关推荐
C_心欲无痕3 小时前
前端实现水印的两种方式:SVG 与 Canvas
前端·安全·水印
尾善爱看海6 小时前
不常用的浏览器 API —— Web Speech
前端
美酒没故事°6 小时前
vue3拖拽+粘贴的综合上传器
前端·javascript·typescript
jingling5557 小时前
css进阶 | 实现罐子中的水流搅拌效果
前端·css
悟能不能悟9 小时前
前端上载文件时,上载多个文件,但是一个一个调用接口,怎么实现
前端
可问春风_ren9 小时前
前端文件上传详细解析
前端·ecmascript·reactjs·js
羊小猪~~10 小时前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
晚风资源组11 小时前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu11 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
光影少年13 小时前
前端如何调用gpu渲染,提升gpu渲染
前端·aigc·web·ai编程