During the process of creating a React application, automatic page refresh worked, but today after another day of working on the code, I noticed that when saving any changes in the code, the browser stopped responding to them, and you need to click on refresh the page in order for the changes to become visible.
There are no errors in the console.
What could be the problem?
Git repo: link
There is an issue with some versions of react-script packages that insert an unnecessary document body in the DOM. If this is the problem you can solve it here Github Issue.
Related
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
i'm working on a react app (using create react app) but my live server is not working. When ever i start it i.e run the command of npm start it open a browser tab and keep on loading... Anyone knows whats the issue.
Actually, there was an infinite loop in my program. I was calling a component inside it. Which was causing the issue.
I'm doing development work using gatsby develop. Basically, this script monitors the source code files and re-builds whenever there are changes.
When the re-build succeeds, the browser automatically refreshes and shows the newly built page.
However, when the re-build fails, the browser does nothing, and if I were to manually refresh the webpage, it still loads the last working version, leading to confusion as to why my changes are not reflected.
The only way to tell that the re-build failed is by looking at the terminal output of gatsby develop, which I often hide in order to maximize screen real estate.
Is there a way to for me to just look at the browser and code, and be able to tell that a re-build has failed? The best would be to have the errors show up in the browser, much like the javascript errors, where the re-build was successful, but the code ran into issues in the browser, i.e. TypeErrors, undefined etc.
Thank you.
After #gnujoow's comments, I did a quick check and realized that build failures already show up in the browser.
For some reason, my browser does not always refresh when there are build failures. Thanks #gnujoow
While using the application, if there is a react-native 'modal' opened. I need to explicitly close it before refreshing the app. Else it would stay open and I have restart the app to close it.
It is known bug which happens during development only. Don't worry about it, It won't happen in production app
This is a known bug in react-native, more info here
Based on the discussion in the GitHub thread, looks like the solution is not to be expected soon.
background:
I'm just getting started with AngularJS and I'm using HotTowel as a starting point.
I've actually done a fair amount of work with HotTowel and have several features built for an application I'm doing. What led me to this problem is trying to get ui-grid in to my application. It blows up. Looking at HotTowel it seems to have been a while since it was last update, but the Angular stuff (and other libraries) are full steam ahead. When I update all of the Angular packages HotTowel's navigation stuff stops working. I'm going to start chasing it down, but I thought I might ask if somebody else has already fixed this issue to save myself some time.
Reproduction:
I'm using VisualStudio2015. My project is an ASP.NET Web Application (.NET Framework) w/ just MVC added.
For the reproduction of the issue I used the above in a new solution. I then went to manage NuGet packages and update everything to latest, there should be 10 updates. This requires a restart of Visual Studio.
Once I'm back in I return to my solution and bring up Manage NuGet pakages again. This time I go to Browse and find HotTowel. This brings up a short list. I select HotTowl.Angular by John Papa (~73.6K downloads, version v2.3.3) and install it. Allow it to overwrite the favorite icon.
After NuGet finishes go to the solution explorer, find Index.HTML, right click on it and select "set as start page". Now, open Index.html and change line 51 to say "" and save it.
Now do a rebuild all and then run the application using Google Chrome (issue will occur with any browser). Everything works great. You can switch between dashboard and admin.
Stop the application and return to manage nuget package. select the update tab and update all of the packages. You'll be asked about overwriting some map files, go ahead and do it.
Do another rebuild all and then run the application.
The dashboard will come up as before, click on admin. You will see dashboard fade out and then fade back in. This is the issue. the routes appear to be broken.
At this point there is nothing custom in the solution. We have just updated all of the packages to their latest releases. HotTowel, however seems to have a gone stale.
Being new to Angular, and HotTowel. I'm not sure where to start debugging this.
At a guess the issue is with how the code in config.route.js sets up the routes.
Can somebody please give me some hints on how to fix this?
TIA