Vite+React+Tailwind项目装shadcn后缺失lightningcss模块报错求助

在基于Tailwind、React.js的Vite项目中，安装shadcn后启动开发服务器时出现报错，提示无法找到模块../lightningcss.win32-x64-msvc.node，导致vite.config.ts加载失败。报错详情如下：

failed to load config from C:\Users\user\Desktop\sann\ERP\vite.config.ts
error when starting dev server:
Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:
- C:\Users\user\Desktop\sann\ERP\node_modules\lightningcss\node\index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (C:\Users\user\Desktop\sann\ERP\node_modules\lightningcss\node\index.js:22:22)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)

解决方案 #

• 完全清除缓存与依赖，重新安装

  1. 删除node_modules文件夹：Windows执行 rmdir /s /q node_modules，Mac/Linux执行 rm -rf node_modules
  2. 删除项目根目录下的package-lock.json文件
  3. 强制清除npm缓存：npm cache clean --force
  4. 重新安装所有依赖：npm install

• 手动锁定lightningcss兼容版本
  打开package.json，在devDependencies中添加指定版本的lightningcss，比如：

  "devDependencies": {
    "lightningcss": "^1.21.5"
  }
  

  执行npm install完成安装

• 检查Vite配置文件
  打开vite.config.ts，排查是否存在手动引入或配置lightningcss的代码，若有则确认路径是否正确，或暂时注释后重新启动服务测试

• 切换Node.js版本
  使用nvm切换到长期支持版（如v18.x或v20.x），避免版本不兼容问题：

  nvm install 18
  nvm use 18
  

内容的提问来源于stack exchange，提问作者Hiba Youssef