如何解决npm run dev时出现的Unexpected '%'错误？

云上老周

2026-6-13

Problem Analysis

Critical Build Error: The Unexpected "%" error points to a corrupted axios package in node_modules—the first line of the axios file is %!PS-Adobe-3.0, which is PostScript code instead of valid JavaScript. This means the package was not installed correctly.
Peer Dependency Conflicts: React 19 is a recent release, and most ecosystem packages (like @react-spring) haven't updated their peer dependency requirements to support it. These conflicts can lead to unstable installs and build failures.

Step-by-Step Solutions

1. Full Dependency Cleanup and Reinstall

Corrupted packages often stem from incomplete installs or cached data. Run these commands to reset:

# Delete node_modules and lock files
rm -rf node_modules package-lock.json
# Clear npm cache
npm cache clean --force
# Reinstall all dependencies
npm install

2. Explicitly Reinstall Axios

If the axios error persists after cleanup, force a fresh install of the package:

npm uninstall axios
npm install axios

(Note: @inertiajs/react relies on axios, so this ensures you get the correct, uncorrupted version.)

3. Downgrade React to 18.x

React 19 lacks widespread support from most libraries. Downgrade to the stable React 18 release to resolve peer dependency warnings:

npm uninstall react react-dom
npm install react@^18.3.1 react-dom@^18.3.1

4. Fix Incomplete package.json

Your provided package.json snippet cuts off at "tailwindcss"—ensure the file has valid JSON syntax. Example corrected dependencies section:

"dependencies": {
  "@headlessui/react": "^2.2.0",
  "@inertiajs/react": "^2.0.5",
  "axios": "^1.7.7",
  "framer-motion": "^12.5.0",
  "hamburger-react": "^2.5.2",
  "laravel-vite-plugin": "^1.2.0",
  "lenis": "^1.2.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-icons": "^5.5.0",
  "react-router-dom": "^7.3.0",
  "react-toastify": "^11.0.5",
  "react-toggle-dark-mode": "^1.1.1",
  "sweetalert2": "^11.17.2",
  "swiper": "^11.2.5",
  "tailwindcss": "^3.4.1"
}