我被vite-plugin-style-import硬控了两个小时

vite-plugin-style-import导致Vite 构建失败,我被硬控了两个小时

💥 事故现场

本地开发好好的,一到 Docker 就翻车:

bash 复制代码
ERROR  failed to load config from /src/vite.
config.ts
ERROR  error during build:
Error: Cannot find module 'consola'
Require stack:
- /src/node_modules/vite-plugin-style-import/dist/index.cjs

症状:本地能跑,Docker 崩溃 🤔

🔍 排查过程(踩坑实录)

第一步:看错误信息(废话文学)

错误堆栈指向 vite-plugin-style-import,第一反应是:

"这插件怎么了?我又没改过它!" 😤

第二步:检查依赖(开始怀疑人生)

bash 复制代码
grep -r "consola" package-lock.json

发现一堆 consola 相关的依赖,但版本乱七八糟:

  • consola@3.4.2 标记为 optional: true
  • vite-plugin-html 嵌套了一个 consola@2.15.3
  • vite-plugin-style-import 声明需要 console@0.7.2

这时候想:"为什么有这么多版本?npm 你是不是有病?" 🤬

第三步:深入源码(真相大白)

打开 vite-plugin-style-import 的源码一看:

javascript 复制代码
// dist/index.cjs 第10行
const consola = require("consola"); // 👀 用的是 consola

再看 package.json:

json 复制代码
"dependencies": {
  "console": "^0.7.2"  // 👀 声明的是 console
}

卧槽!包名都写错了! 这就是传说中的"复制粘贴都能出错"系列 🤡

第四步:对比环境(恍然大悟)

本地为什么能跑?

bash 复制代码
ls node_modules/ | grep consola
# 结果:consola  <-- 居然有!

Docker 为什么崩?

bash 复制代码
# Docker 环境严格按 package-lock.json 安装
# optional 依赖装不上直接跳过
# 顶级 node_modules 里没有 consola

这时候终于明白了:本地有"幽灵依赖"救了命,Docker 环境太干净反而翻车了 💀

第五步:分析包查找过程(技术深度)

Node.js 查找模块的规则很简单,但魔鬼在细节里:

🟢 vite-plugin-html 为什么能找到 consola?

bash 复制代码
查找路径:
1. node_modules/vite-plugin-html/node_modules/consola ✅ 找到了!
   ↳ 因为它自己的 package.json 里正确声明了 consola 依赖

🔴 vite-plugin-style-import 为什么找不到?

bash 复制代码
查找路径:
1. node_modules/vite-plugin-style-import/node_modules/consola ❌ 没有
   ↳ 因为它声明的是 console,不是 consola
2. node_modules/consola ❌ 顶级也没有
   ↳ 因为 Docker 环境跳过了 optional 依赖
3. ../node_modules/consola ❌ 向上查找也没有
   ↳ 最终 GG

关键差别:一个有自己的嵌套依赖,一个依赖声明写错了!

第六步:理解 optional: true 的坑

optional: true 听起来很温柔,其实是个狠角色:

json 复制代码
"consola": {
  "version": "3.4.2",
  "optional": true  // 🎯 这是个狠活
}

含义解释

  • 本地环境:"optional 装不上?算了算了,不影响开发" 😎
  • Docker 环境:"optional 装不上?那就不装了,严格执行" 🤖
  • 网络不好时:"optional 下载超时?跳过跳过,不影响主流程" ⏰
  • 内部仓库缺包时:"optional 包找不到?无所谓,继续安装其他的" 🚫

结果就是

  • 关键依赖被标记为 optional
  • 本地能凑合(有幽灵依赖兜底)
  • Docker 环境直接跳过
  • 生产环境翻车 💥

💡 吃一堑长一智

使用任何第三方库时都要检查一下维护状态和更新频率,否则你就可能是下一个🤡🤡🤡(扑克牌的最大数 麦当劳的吉祥物 蝙蝠侠的大客户 哥谭市的大头目)。

相关推荐
天空之城--5 小时前
Claude Code 高效开发 Web 2D/3D 完全指南:心法、自定义 Skill 体系与社区技能包实战
前端·3d
IT_陈寒5 小时前
SpringBoot自动配置坑了我三天,原来漏了这个注解
前端·人工智能·后端
逝水无殇6 小时前
HTML 文本格式化详解:掌握 <strong>、<em>、<mark>、<del> 等常用标签
前端·javascript·html
特立独行的猫a6 小时前
DeepSeek Harness插件和工具的区别介绍及开发入门指南
前端·ai·agent·插件·deepseek·harness
小新讲网安6 小时前
HTTP请求走私攻击实战:CL.TE与TE.CL绕过前端服务器全解析
服务器·前端·网络·web安全·http·架构·漏洞
风骏时光牛马6 小时前
AI办公系统异常事件复盘分析
前端
console.log('npc')6 小时前
React 19 + Vite 企业级前端项目:从零搭建到规范交付
前端·react.js·前端框架
程序员黑豆6 小时前
Java字符串常量池完全指南:原理、intern()方法与性能优化最佳实践
java·前端·ai编程
光影少年6 小时前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架
Canace6 小时前
笔记本都合上了,Claude 为什么还能在手机上执行电脑上装的技能?
前端·人工智能·ai编程