[SOLVED] Dependencies Problem on vite and npm install error

Dependencies Problem on vite and npm install error

I'm new to Laravel, and I tried to install bootstrap into Laravel, so I do not need to use the CDN.
But instead I get this error message and I don't know how to read this. I tried to understand it, but what information do I get from here, and how to solve this. Please help me solve this problem.

Thank you!

'Log files:
C:\Users\User\AppData\Local\npm-cache\_logs\2023-07-28T04_14_56_286Z-debug-0.log

# npm resolution error report

While resolving: @vitejs/plugin-react@2.2.0
Found: vite@4.3.9
node_modules/vite
  dev vite@"^4.0.0" from the root project
  peer vite@"^3.0.0 || ^4.0.0" from laravel-vite-plugin@0.7.8
  node_modules/laravel-vite-plugin
    dev laravel-vite-plugin@"^0.7.8" from the root project
  peer vite@"^2 || ^3 || ^4" from vite-plugin-full-reload@1.0.5
  node_modules/vite-plugin-full-reload
    vite-plugin-full-reload@"^1.0.5" from laravel-vite-plugin@0.7.8
    node_modules/laravel-vite-plugin
      dev laravel-vite-plugin@"^0.7.8" from the root project

Could not resolve dependency:
peer vite@"^3.0.0" from @vitejs/plugin-react@2.2.0
node_modules/@vitejs/plugin-react
  dev @vitejs/plugin-react@"^2.2.0" from the root project

Conflicting peer dependency: vite@3.2.7
node_modules/vite
  peer vite@"^3.0.0" from @vitejs/plugin-react@2.2.0
  node_modules/@vitejs/plugin-react
    dev @vitejs/plugin-react@"^2.2.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

This is my package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-react": "^2.2.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    }
}

PS C:\Users\User\Desktop\LaravelTest\Report-Generator> npm list vite
npm ERR! code ELSPROBLEMS
npm ERR! invalid: vite@4.3.9 C:\Users\User\Desktop\LaravelTest\Report-Generator\node_modules\vite
Report-Generator@ C:\Users\User\Desktop\LaravelTest\Report-Generator
├─┬ @vitejs/plugin-react@2.2.0
│ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
├─┬ laravel-vite-plugin@0.7.8
│ ├─┬ vite-plugin-full-reload@1.0.5
│ │ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
│ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
└── vite@4.3.9 invalid: "^3.0.0" from node_modules/@vitejs/plugin-react


npm ERR! A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\2023-07-28T07_34_14_603Z-debug-0.log

Solution

Please remove vite, @vitejs/plugin-react and @vitejs/plugin-react dependencies from package.json Delete node_modules Delete package-lock.json Clean npm cache

npm cache clean --force

Then install like this:

npm install  bootstrap
npm install --save-dev vite
npm install --save-dev @vitejs/plugin-react
npm install --save-dev @vitejs/plugin-react