Encountered error: A problem occurred while executing npm install && npm run dev - Vite

Hi everyone, today I encountered a problem, when I installedlaravel uiusing react and passed to thenpm installstep an error occurred, so below you will find the error

npm ERR! A complete log of this run can be found in: npm ERR! C:UsersE495AppDataLocalnpm-cache_logs2023-01-16T08_08_36_872Z-debug-0.log PS C:UsersE495Desktoplaravel-simple-crud> npm install npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: undefined@undefined npm ERR! Found: vite@4.0.4 npm ERR! node_modules/vite npm ERR! dev vite@"^4.0.4" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-react@2.2.0 npm ERR! node_modules/@vitejs/plugin-react npm ERR! dev @vitejs/plugin-react@"^2.2.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:UsersE495AppDataLocalnpm-cacheeresolve-report.txt for a full report.

So above and below the error you will find mypackage.json

{ "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@popperjs/core": "^2.11.6", "@tailwindcss/forms": "^0.5.2", "@vitejs/plugin-react": "^2.2.0", "alpinejs": "^3.4.2", "autoprefixer": "^10.4.2", "axios": "^1.1.2", "bootstrap": "^5.2.3", "laravel-vite-plugin": "^0.7.2", "lodash": "^4.17.19", "postcss": "^8.4.6", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.56.1", "tailwindcss": "^3.1.0", "vite": "^4.0.4" } }

I tried reading the error and changing thevite version to 4.0.4but nothing happened

reply all (1)

P粉0432953372023-11-11 17:02:39 1 floor

You should be able to resolve this error using the following command:

npm install --legacy-peer-deps

This previous articledetails what--legacy-peer-depsis doing here.

In short,@vitejs/plugin-react(specifically the version you have as a development dependency2.2.0) lists older versions of vite (vite@"^3.0.0") as one of itspeer dependencies, but it is looking for a newervite@"^4.0.4"# that is already installed ##. For reasons I can't fully explain (see the linked post or Google if you're curious), NPM is unable to resolve this peer dependency conflict in the same way that our more familiar regular and development dependencies typically resolve and .--legacy-peer-depsWork around this issue by bypassing automatic installation of peer dependencies.