I've created a React (19) + Vite (6.2.0) + TypeScript project and installed the latest ShadCN and Zod following the official ShadCN installation guide. However, whenever I run pnpm dev, I encounter the following error:
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`);
Interestingly, removing either Zod or ShadCN resolves the issue, and the dev server starts successfully. How can I resolve this issue to use ShadCN and Zod together without errors?
{
"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"
}
}This is a speculative answer, but if you are using the most recent version of pnpm (10.x.x and above), a rather impactful change was made such that by default pnpm no longer allows third party packages to run lifecycle scripts during installation. This is for good reason (security), but it does hinder some typical patterns that some packages rely on.
Lightning CSS, which it is complaining about, needs such scripts in order to remotely download a platform specific binary that it requires, outside of the tarball for the NPM package itself. Since that couldn't execute, Lightning CSS can't find what it expected to exist.
You have to whitelist the dependencies that need such scripts via pnpm.onlyBuiltDependencies. In package.json:
"pnpm": {
"onlyBuiltDependencies": ["lightningcss"]
}
Alternatively you can automate the process of "approving" deps such that they can run scripts by using pnpm approve-builds instead (which in turn populates onlyBuiltDependencies). This will show up any other packages that are trying to run scripts on installation too.
After the build is approved by either method, you will then need to:
pnpm install
pnpm dev