npm run deploy not working properly for react app - reactjs

I am running npm run deploy command but it is stopping after 2 lines without any error and files are not getting updated. I have hosted website on s3. Snapshot shows the 2 lines. It was working fine before. Something happened suddenly. Thanks in advance for the help.

Restarting pc solved it. I don't know how.

Related

Github-Pages deployement issue

I have worked on an organization whose entire account was deleted by mistake but was later restored. Now I am trying to deploy a project in this org with gh-pages. Everything works or seems fine like to commits and all, unless I try to deploy the project. When I run the command npm run deploy the feedback I get is "published". But when I go to github and look for the website it says Error 404.
I have looked into the deployment log and found
this
I have tried every possible way to deploy a project using gh-pages and I have followed its procedure carefully. I found nothing useful which can solve this issue.
Thankyou in advance.

Why the live server extension is shown the React folders instead of running the code on the browser

image describe my problem
Hi Guys, I had this problem when I launched my React project with Live Server extension. It showed the project's folders instead of running the application. I've removed Live Server extension and reinstalled it but I've got the same issue. When I run it from the terminal with "npm run start" command it works well, please guide me because I read and test solutions being in this link link but it doesn't work.
Try your localhost:3000 or npm start
This is because your React code needs to be compiled. You can run a live server using React with
npm start

Next js random error "Cannot read properties of undefined (reading'map')"

So I am working with NextJs and facing random behavior. Once the application runs successfully, I do development and push code to Github. The next day I again run the app using npm run dev and face this.
So then I had to remove the repository and reset it again to make it work. But now today I am facing this again. I successfully worked yesterday, pushed the code to the git, and when I run this today I again face this error.
This seems to be something wrong with NextJS. Can anyone point out the cause?
For anyone else facing this annoying issue, #Pranta has already covered it. If it is random for you, and you aren't mapping anything, just do the following:
Delete the node_modules directory
Then npm install again.

Hot reload stopped working after adjusting environment for work requirements

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.

Creating reactJs production web app and deploy to heroku

I have react web app running locally on my machine now I want to put this on heroku.I know before publishing it globally I need to run.
npm run build
In order to generate production ready code.My question is what if after generating production code and pushing it to heroku if I change something in react code so again do I need to run npm run build command before pushing it to heroku.
Someone please clear my doubt. Any help would be appreciated.
THANKS
Yes, you would need to build again. However, it would be a shorter time span the next time.

Resources