Problem: AI Tools Give You Broken package.json Files
You asked Claude or ChatGPT to generate a React component, and now npm install fails with peer dependency errors or version conflicts that didn't exist before.
You'll learn:
- Why AI tools suggest incompatible dependency versions
- How to diagnose and fix version conflicts fast
- Prevent future dependency issues with AI-generated code
Time: 12 min | Level: Intermediate
Why This Happens
AI models were trained on code from 2020-2024, but package ecosystems evolve daily. When an LLM suggests react@18.2.0 with react-router-dom@6.22.0, it doesn't know that React 19 was released or that newer router versions exist.
Common symptoms:
ERESOLVE unable to resolve dependency treePeer dependency warningsfor React, TypeScript, ESLint- Working locally but fails in CI/CD
npm install --force"fixes" it but breaks things later
Real example:
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from react-router-dom@6.22.0
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom@"^6.22.0" from the root project
Solution
Step 1: Check What You Actually Have
# See installed versions
npm list react react-dom react-router-dom
# Check what your package.json wants
cat package.json | grep -A 2 "dependencies"
Expected: You'll see version mismatches between what's installed and what AI suggested.
Example output:
├── react@19.0.0
├── react-dom@19.0.0
└── react-router-dom@6.22.0 (peer dep expects react@^18.0.0)
Step 2: Find Compatible Versions
# See all available versions
npm view react-router-dom versions --json
# Check what works with your React version
npm view react-router-dom@latest peerDependencies
Why this works: Shows you which versions explicitly support React 19+.
If you see:
{
"peerDependencies": {
"react": ">=18.0.0"
}
}
That version will work.
Step 3: Update package.json Smartly
{
"dependencies": {
// Use ranges that match your major version
"react": "^19.0.0",
"react-dom": "^19.0.0",
// Let npm find compatible version
"react-router-dom": "^6.28.0",
// Pin exact versions only for stability-critical packages
"typescript": "5.7.2"
}
}
Version prefix rules:
^6.28.0= Allow 6.28.0 to <7.0.0 (safe minor updates)~6.28.0= Allow 6.28.0 to <6.29.0 (patch only)6.28.0= Exact version (no updates)
For AI-suggested dependencies:
- Keep major versions from AI (e.g.,
6.x) - Update minor/patch to latest:
^6.latest - Run compatibility check
Step 4: Clean Install
# Nuclear option - start fresh
rm -rf node_modules package-lock.json
npm install
# Verify no conflicts
npm list --depth=0
If it fails:
- "Conflicting peer dependency": Update the offending package first
- "EBADPLATFORM": AI suggested a package not compatible with your OS (use alternatives)
- Still broken: Check if AI mixed CommonJS and ESM packages
Step 5: Handle Stubborn Peer Dependencies
When a legacy package won't update:
# See exactly what's conflicting
npm install --dry-run
# Override peer deps (last resort)
npm install --legacy-peer-deps
Add to package.json for team consistency:
{
"overrides": {
"react": "^19.0.0"
}
}
Why this works: Forces all packages to use your React version, even if they don't explicitly support it. Risky but sometimes necessary for abandoned packages.
Verification
# Build the project
npm run build
# Check for runtime errors
npm run dev
You should see:
- Clean install with no warnings
- Application starts without errors
- Hot reload works (if using Vite/Next.js)
Test the AI-generated component:
// Verify imports work
import { Component } from './AIGeneratedComponent';
Prevention Strategy
When Getting Code from AI
Always ask the AI to include:
Show me package.json dependencies with versions
that work with [your stack]. I'm using:
- React 19.0.0
- TypeScript 5.7.2
- Node.js 22.x
Before installing AI suggestions:
# Preview what would be installed
npm install <package> --dry-run
# Check compatibility
npm view <package> peerDependencies
Create a Validation Script
{
"scripts": {
"check-deps": "npm outdated && npm audit",
"validate": "npm list --depth=0 && npm run check-deps"
}
}
Run after accepting AI suggestions: npm run validate
What You Learned
- AI models suggest outdated versions because of training data cutoff dates
- Use
npm viewto check peer dependency requirements before installing - Version ranges (
^,~) prevent some conflicts automatically overridesin package.json forces version consistency across dependencies
Limitation: Some packages genuinely don't support newer React/Node versions yet. Check the package's GitHub issues before forcing compatibility.
Red flags in AI suggestions:
- Mixing React 18 and 19 packages
- Using deprecated packages (moment.js, request, etc.)
- Exact versions everywhere (too brittle)
- No TypeScript types included
Bonus: Quick Reference
Diagnose fast:
npm list <package> # Show dependency tree
npm outdated # See available updates
npm audit # Security issues
npm explain <package> # Why this is installed
Common AI dependency mistakes:
| AI Suggests | Problem | Fix |
|---|---|---|
react@18.2.0 | You're on 19 | "react": "^19.0.0" |
@types/react@18.0.0 | Type mismatch | Match React version |
eslint@8.x | ESLint 9 breaking changes | Stick with 8.x or update config |
node-sass | Deprecated | Use sass (Dart Sass) |
When to use --force vs --legacy-peer-deps:
--legacy-peer-deps: Ignores peer deps, safer for prototyping--force: Overwrites versions, can break things silently- Neither: Fix the actual conflict (preferred)
Tested on npm 10.8.3, Node.js 22.12.0, React 19.0.0, macOS & Ubuntu
Found this helpful? Star the companion GitHub repo with validation scripts.