error occured when do npm install && npm run dev - Vite - Laravel UI React

Question

hello everyone today i had a problem that's when i install laravel ui with react and pass to the step of npm install an error occured so below you will find the error

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\E495\AppData\Local\npm-cache\_logs\2023-01-16T08_08_36_872Z-debug-0.log
PS C:\Users\E495\Desktop\laravel-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:\Users\E495\AppData\Local\npm-cache\eresolve-report.txt for a full report.

so above the error and below you'll find my package.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 try to read the error and change the vite version to 4.0.4 but without any result

score 5 · Accepted Answer · answered Jan 19 '23 at 21:53

You should be able to get by this error with the following command:

npm install --legacy-peer-deps

This previous post goes into detail about what --legacy-peer-deps is doing here.

In short, @vitejs/plugin-react (specifically the version 2.2.0 you have as a dev dependency) has listed an older version of vite (vite@"^3.0.0") as one of its peer dependencies, but it is finding the newer vite@"^4.0.4" installed. For reasons that I can't totally explain (see the linked post or Google if you're curious), NPM is not able to resolve this peer dependency conflict as it usually would for the regular dependencies and dev dependencies that we're more familiar with. --legacy-peer-deps gets around this by bypassing peer dependency auto-installation.

To assist those Googling with a similar problem—I had this same problem when dealing with a particular version of `@sveltejs/vite-plugin-svelte` that had a peer dependency issue for vite. The above command also resolve my issue. — Adam Stevenson, Jan 19 '23 at 21:53
yeah it's work! and also when use npm install --force it will work — Achraf Hebboul, Jan 19 '23 at 21:55

error occured when do npm install && npm run dev - Vite - Laravel UI React

1 Answers1