Search code examples
reactjsvue.jsnpmlaravel-9laravel-ui

laravel 9 : could not resolve peerDependencies during install reactJs & VueJs using laravel/ui

I installed Laravel/Ui in Fresh Laravel 9 for setup ReactJs

I was run below commands step by step in cli

composer require laravel/ui  

php artisan ui react

npm install

now when i run npm install command then it throw error about "unable to resolve dependency tree" as like below

microtech-007@microtech-007:/var/www/html/laravel-cms$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/[email protected]
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 /home/microtech-007/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/microtech-007/.npm/_logs/2023-01-10T09_34_09_381Z-debug-0.log

additional :- if you tried to setup VueJs using laravel/ui then you may got error as like below during running the npm install command

microtech-007@microtech-007:/var/www/html/laravel-cms$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.0.1" 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 /home/microtech-007/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/microtech-007/.npm/_logs/2023-01-10T09_54_29_026Z-debug-0.log
Solution

  • If you faced issue during setup ReactJs / VueJs using laravel/ui

    then follow below step

    For ReactJs

    Step 1 Remove "@vitejs/plugin-react" package. Run npm un @vitejs/plugin-react

    Now, try to run npm install command. it successfully installing all packages.

    then after install "@vitejs/plugin-react" package again as a DevDependecies

    Step 2 :- npm i @vitejs/plugin-react --save-dev OR npm i -D @vitejs/plugin-react

    Done ... Now you can use npm run dev OR npm run build

    For VueJs

    Step 1 Remove "@vitejs/plugin-vue" package. Run npm un @vitejs/plugin-vue

    Now, try to run npm install command. it successfully installing all packages.

    then after install "@vitejs/plugin-vue" package again as a DevDependecies

    Step 2 :- npm i @vitejs/plugin-vue --save-dev OR npm i -D @vitejs/plugin-vue

    Done ... Now you can use npm run dev OR npm run build

    I hope this one helps to someone

    References :- [BUG] Could not resolve peerDependencies of matching semver ranges