React19+Vite项目中ShadCN与Zod共存时../pkg解析错误如何解决？

问题 #

我用React 19 + Vite 6.2.0 + TypeScript创建了项目，按官方指南装了最新版ShadCN和Zod，但运行pnpm dev时总是报错：

X [ERROR] Could not resolve "../pkg"
    node_modules/.pnpm/lightningcss@1.29.2/node_modules/lightningcss/node/index.js:17:27:
      17 │   module.exports = require(`../pkg`);

奇怪的是，移除Zod或者ShadCN其中一个就能正常启动开发服务器。怎么让两者共存且不报错？

项目的package.json内容：

{
  "name": "react_template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.1.2",
    "@tailwindcss/vite": "^4.0.14",
    "@tanstack/react-query": "^5.69.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "dotenv": "^16.4.7",
    "lucide-react": "^0.483.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.4.0",
    "sass": "^1.86.0",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.14",
    "tw-animate-css": "^1.2.4",
    "zod": "^3.24.2",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/node": "^22.13.10",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

解决方法 #

1. 锁定lightningcss兼容版本 #

错误源于lightningcss@1.29.2的文件缺失问题，大概率是依赖冲突导致安装不完整。直接指定无问题的版本：

• 在package.json的dependencies中添加"lightningcss": "1.28.1"
• 执行pnpm install重新安装依赖

2. 配置Vite优化依赖解析 #

修改vite.config.ts，添加对lightningcss的优化规则，让Vite正确识别它的文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['lightningcss'],
    esbuildOptions: {
      resolveExtensions: ['.js', '.json', '.node'],
    },
  },
  resolve: {
    alias: {
      '../pkg': '../pkg/index.node',
    },
  },
});

3. 清理缓存重新安装依赖 #

缓存损坏可能导致依赖安装不全，执行以下步骤：

• 运行pnpm store prune清理pnpm缓存
• 删除项目根目录的node_modules文件夹和pnpm-lock.yaml文件
• 重新执行pnpm install

4. 降级Tailwind CSS版本 #

当前使用的Tailwind CSS 4.0.14属于较新的预发布版本，可能与Vite 6.2.0存在兼容性冲突，尝试降级到稳定版：

• 将package.json中的tailwindcss和@tailwindcss/vite版本改为^3.4.1
• 执行pnpm install更新依赖

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