When running npm start to deploy my code to localhost:3000 the version displayed is a previous version of the code.
I've tried resetting my editor (Visual Studio Code) and Node.js. Tried disable cache in the network inspector of Chrome.
The browser will reload upon a save, however it will not use the correct code. It continues to 'hang' on the previous version.
This is potentially an issue with the create-react-app service worker.
Can you please look for that file, and remove it or comment it out?
Otherwise, it is possible you have an error in your code.
Related
I'm trying to do a fresh install of nextjs on Windows (see command line screenshot) using gitbash and latest nodejs lts version (16.14.2). When running npm run dev everything seems to be in order.
However, after browsing to http://localhost:3000, I receive this:
I looked at Fresh NextJS App throwing errors before any changes but the version in that issue is next 11.1.1 whereas current is 12.1.4. At this point I'm pretty much stuck. =\
Turns out it was an issue with Chrome extensions. I disabled all of them and no longer received the error. One by one I re-enabled all of them but never found the source. =\
I have a Visual Studio project with a simple React ClientApp that I'm using for testing. The client app was working well until suddenly it wasn't. (It may have broken when I added a static wwwroot folder to the project, but that has since been removed--I was testing with a different React App at the time so I wasn't paying much attention to whether my admin utility app was still working.)
Now for the life of me I can't get webpack-dev-server to serve the React app. I've tried:
/invalidate,
npm build
Changing the ports the server is running on
Hitting it from a different browsers.
npm cache clean --force
Reverting back to a much earlier version of the project when this front end was definitely working
Strangely enough if I run npm start directly in the ClientApp folder the app runs fine. For workflow reasons, and for reasons of just wanting to understand how this works, I'd like to keep using the VS launched version.
The symptom is that it simply displays the Index.html page and does not load the app. In Chrome it keeps failing to load 0.chunk.js with error ERR_HTTP2_PROTOCOL_ERROR. In Firefox this there are no errors loading this file, but only the index.html file displays.
I can navigate to /webpack-dev-server and everything looks good. I can click through to all of the individual files from there.
Any ideas for how to diagnose this would be fantastic!
FWIW - if anyone runs into this issue, the solution was to simply update Microsoft.AspNetCore.SpaServices.Extensions to the latest version (in this case 5.0+).
I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.
Today I downloaded the ABP Asp.Net Core REACT SPA template. After downloading, I ran npm install and then npm start. These two steps worked, no issues.
Once the REACT app has started, the browser opens up and all I get is a blank page. Then after a few seconds the below error dialog box comes up.
When I look at the chrome console, I find the errors shown below.
I'm new to REACT and very much still learning it. So I could use some help in tracking this error down.
Please note I did run the migrator project and got the DB setup on my PC and updated the connection strings to ensure connectivity for the .NET code.
Follow steps below to check whether you miss any step:
VS 2019 Open abp project
Change YourProjectName.Web.Host -> appsettings.json -> ConnectionStrings.Default
From VS 2019 PMC, set YourProjectName.EntityFrameworkCore as Default Project
Run update-database which will create the database
Set YourProjectName.Web.Host as Start Project, and run YourProjectName.Web.Host
For expected result, you will get http://localhost:21021/swagger/index.html
CD reactjs folder and run npm install and npm start
http://localhost:3000/user/login will show up.
I am attempting to use create-react-app in AWS Cloud9. While I have no problems creating the app, when I try to run npm start I just get this screen. When I clicked on "Why am I seeing this?" I was taken to this page, which led me to turn on HTTPS. While HTTPS was enabled, it did not fix the issue. create-react-app's Github page suggested that CHOKIDAR_USEPOLLING=true is required for virtual machines, but that also did not fix the issue: it now creates a blank page, as shown here. Finally, thinking that perhaps the issue was due to some accidental change, I deleted the directory and made a fresh one, but the issue persisted.
Any insight on how this can be resolved would be appreciated.
I had a similar issue. For me I was just going about it the wrong way and I can preview my application by going to Preview at the top of the IDE and then Preview Running Application.