My React + Vite app runs in local but not in Vercel

[ejgutierrez74]

Summary

The title is self explanatory:

I made an update in my local system, and everything runs, the dev and build.
I commit the changes in github.
I redeploy project in vercel
Im a newbie in react and vercel, and this is a little project with eductional purpose

Gives me error

[14:26:42.240] Running build in Washington, D.C., USA (East) – iad1
[14:26:42.393] Cloning github.com/ejgutierrez74/workshop-react-eduardo (Branch: main, Commit: 8c4bdc2)
[14:26:42.826] Skipping build cache, deployment was triggered without cache.
[14:26:43.124] Cloning completed: 730.419ms
[14:26:43.416] Running "vercel build"
[14:26:43.869] Vercel CLI 34.2.0
[14:26:44.874] Installing dependencies...
[14:26:46.234] npm ERR! code ERESOLVE
[14:26:46.237] npm ERR! ERESOLVE could not resolve
[14:26:46.237] npm ERR!
[14:26:46.237] npm ERR! While resolving: eslint-plugin-react@7.34.1
[14:26:46.238] npm ERR! Found: eslint@9.3.0
[14:26:46.238] npm ERR! node_modules/eslint
[14:26:46.238] npm ERR! eslint@"^9.3.0" from the root project
[14:26:46.241] npm ERR! peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/eslint-utils@4.4.0
[14:26:46.241] npm ERR! node_modules/@eslint-community/eslint-utils
[14:26:46.242] npm ERR! @eslint-community/eslint-utils@"^4.2.0" from eslint@9.3.0
[14:26:46.242] npm ERR! 1 more (eslint-plugin-react-refresh)
[14:26:46.242] npm ERR!
[14:26:46.242] npm ERR! Could not resolve dependency:
[14:26:46.242] npm ERR! peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from eslint-plugin-react@7.34.1
[14:26:46.242] npm ERR! node_modules/eslint-plugin-react
[14:26:46.242] npm ERR! dev eslint-plugin-react@"^7.34.1" from the root project
[14:26:46.243] npm ERR!
[14:26:46.243] npm ERR! Conflicting peer dependency: eslint@8.57.0
[14:26:46.243] npm ERR! node_modules/eslint
[14:26:46.243] npm ERR! peer eslint@"^3 || ^4 || ^5 || ^6 || ^7 || ^8" from eslint-plugin-react@7.34.1
[14:26:46.243] npm ERR! node_modules/eslint-plugin-react
[14:26:46.243] npm ERR! dev eslint-plugin-react@"^7.34.1" from the root project
[14:26:46.243] npm ERR!
[14:26:46.244] npm ERR! Fix the upstream dependency conflict, or retry
[14:26:46.244] npm ERR! this command with --force or --legacy-peer-deps
[14:26:46.244] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[14:26:46.244] npm ERR!
[14:26:46.244] npm ERR!
[14:26:46.244] npm ERR! For a full report see:
[14:26:46.244] npm ERR! /vercel/.npm/_logs/2024-05-20T12_26_45_238Z-eresolve-report.txt
[14:26:46.245]
[14:26:46.245] npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-05-20T12_26_45_238Z-debug-0.log
[14:26:46.255] Error: Command "npm install" exited with 1
[14:26:46.618]

Example

No response

Steps to Reproduce

1 - Project works in local.
2 - Commit changes to github
3 - Vercel finds and error, tried to redeploy project
4 - Error still remain

[versecafe]

Can you try deleting your lockfile and trying again?

[ejgutierrez74]

Sorry im a newbie....i dont see any file manager or lockfile in vecel....

You mean package-lock.json ? I have to delete in github and then commit again from local to have the github repository the same things i have in local ??

thanks

[versecafe]

yeah your package-lock delete it in your IDE, and push up a commit, it takes a little longer to get deps without a lockfile declaring them but it can avoid some issues with broken lock files, also if you're new to this I'd recommend using pnpm or bun in the future to have a smoother and faster experience, but it's up to you.

[ejgutierrez74]

But you suggests using pnpm or bun instead or npm ?

But the problem would remain...a vite react app that works without problems in local...somehow doesnt work in vercel... Im a newbie but this should not happen....
Im frightened to delete such important file in local....

[versecafe]

lock files aren't very important they're auto generated and will be regenerated if you run npm i they also have issues all the time, bun and pnpm just have a slightly nicer experience when dealing with them and work almost identically to npm but you can always stick to npm

[ejgutierrez74]

I think it worked. In github i deleted the file and commit ( in the cloud not local) and when i went to Vercel again, seems that make automatically a new deployment. Seems that works and has no errors reported.

Perhaps when fails, this should be automatically by Vercel, delete the .lock file and execute a npm install or whatever.

Thanks