React App Completely Unresponsive After Git Clone and npm Install

created by [deleted] on 28/02/2025 at 20:02 UTC

0 upvotes, 6 top-level comments (showing 6)

[deleted]

Comments

Comment by Killed_Mufasa at 01/03/2025 at 00:53 UTC*

5 upvotes, 1 direct replies

Sounds like it's time to go back to the basics for debugging, in no particular order:

Restart your laptop
Try another browser
Start a new IDE project, clone your project again
Put console.log in render functions
Track memory usage, is the app simply lagging?
Trim down you app to the minimum
Clone your repo at an earlier point in time
Is the JS loaded in properly? Check event handlers for elements in DOM.

Also, please explain this further.

The browser dev tools don't seem to recognize any elements on the page, as if it's just a blank screen, even though all the components are there.

What dev tool? What is blank? How do you know all components are there? Maybe provide some screenshots.

I would put my money on a memory leak in your app somewhere. Maybe some loop, maybe even triggered by something in your local/session/cookie storage.

Comment by nqvst at 01/03/2025 at 09:38 UTC

5 upvotes, 0 direct replies

Sounds like an infinite loop. UseEffect that sets some state that then runs the same useEffect. But its hard to say without any screenshots/error messages etc

Comment by math_rand_dude at 28/02/2025 at 20:22 UTC

3 upvotes, 1 direct replies

Did you clone to the same machine or a different one?
You got the package-lock file from the one that works/worked and did a compare between dependencies?
(edit) both the same browser or different (or different version)?
(edit2) is that project publicly available?

Comment by claypolejr at 01/03/2025 at 10:03 UTC

1 upvotes, 1 direct replies

Did you want to share the repo link so we can help find a solution to the problem?

Comment by UpsetKoalaBear at 28/02/2025 at 20:45 UTC*

-3 upvotes, 2 direct replies

Your dependency version numbers are not fixed.

You need to remove the “^” from your dependency versions, most likely one of them got updated to a new version which broke compatibility with the way you initially implemented it.

The “^” means that you are saying that your app is compatible with “any version which does not modify the left most non-zero element” of the version number of that dependency[1].

1: https://github.com/npm/node-semver?tab=readme-ov-file#caret-ranges-123-025-004

So having a dependency with a version specified in package.json like `^1.2.3` will evaluate to npm allowing the last version between 1.2.3 and 2.0.

So running `npm install` is causing npm to just update all of them to a different version which could have made breaking changes which is why you’re having issues.

For example, sass has had many breaking changes[2] since your version and if it’s getting updated then those are being applied to your app.

2: https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1834

Remove the “^” from your dependency versions in your package.json then manually go through each dependency and update them to a new version.

Comment by Instigated- at 28/02/2025 at 22:07 UTC

0 upvotes, 1 direct replies

Before you cloned it down, did you ensure you had committed and pushed all your work to GitHub(it was up to date with what was working locally)? Easy to forget to push most recent changes.

Did you have any local files that were in the .git ignore (therefore not saved to git) that you need to recreate? Eg ‘.env’ with environmental variables?