I started learning react from yesterday. So I created new react app using command
npx create-react-app firstapp.
When I opened the console in my browser (firefox),
[HMR] Waiting for update signal from WDS..
I was getting this message. I also tried to print on console using log. But console only shows the above message. I saw various questions on stackoverflow, but none worked. I saw an exact question which matches one, but no one answered it. Please tell me if I had done anything wrong. Did I created the app with correct command or anything else should be added.
Also I want to build MERN stack application. I also encountered with Next.js
Can someone explain what is next.js and difference between next.js and MERN
Any help would be appreciated, please.
Thanks in Advance..
MERN is a stack
Next js is a libarary
MERN is used to develop a full stack application
MERN stands for
MONGODB
EXPRESS
REACT
NODE
I'm sure the OP has figured this out by now, but for the uninitiated webpack developer, here are a few details that will potentially help troubleshoot this problem.
HMR stands for Hot Module Replacement. Its a system that quickly moves changes you make in your development IDE out to your app. See the webpack docs on Hot Module Replacement for more/better info.
The HMR message is normal. This displays every time you test your app out in the browser. It means that the Hot Module Replacement is listening in the background of your browser just in case you update the app in your development IDE and it wants to send that update out to the running app loaded in your browser.
The HMR system in your browser app is listening for communication back from the webpack-dev-server (WDS). Again, refer to the webpack docs on this subject for more/better details.
When you mentioned trying to "print on console using log" it sounds like you have been making and saving updates to your app. Is this the case? If so, and you are still getting the same error, it sounds like your build process may be failing somewhere. Look for errors in your terminal window where you ran "npm start" or whatever command you initiated the build with. If it fails, it may kick you out of the script which means WDS may not be able to send updates. Essentially, your app is no longer in communication with the server. It's easiest to just refresh your browser but it sounds like you may also need to troubleshoot your build process.
Can you attach any of the output from your build script?
Related
Currently moving a work project from Create React App to ViteJS. I was a noob when I started working on this project, so I did what I was thought and started with CRA. Let the attacks begin.
In my CRA project I had an env variable called REACT_APP_SERVER_URL, which is self explanatory, but it just links to localhost:8000 on my local machine and to https://exampleserver.com when deployed. It's used for fetching data on the frontend. To get projects you hit https://exampleserver.com/api/projects
When I moved the project to Vite, I changed the env variable to VITE_SERVER_URL. It's all cool and it works amazing on my local machine.
Let's say client url is https://viteclient.com.
Now comes deployment... App crashes on load. I check the console, and good thong I forgot a console.log in on of the fetch functions to tell me what was the issue. I'm getting a 404 from the server. The app made a request to:
https://viteclient.com/exampleserver.com/api/projects
What happened there?? Is VITE_SERVER_URL a saved name for Vite env variables? if so, I can't find anything online about that. It didn't do that in CRA, it doesn't do that in my local machine. Does anyone have any idea what happened? And/or how to fix it.
I tried looking if anyone has a similar issue, but I can't seem to find any other developers having these issues.
Describe the bug:
I have set up an app with CI/CD pipeline with GitHub. I used create react app and various packages. I connected a backend environment that has provisioned graphql and cognito components.
I have different branches connected to different custom domains dev/qa/prod, and have been developing and deploying successfully to the dev branch with little to no issues.
After doing some work I committed the code pushed it up which started the build in amplify.
Locally "npm start running on local host", the app runs with no errors or warnings.
When I look at the deployed app there is a blank screen with this error
I've Tried So Far:
I have worked my way back commenting out components and uninstalling packages to try to nail down a particular spot where I could have introduced something. I ended up just importing App.js with
just a div with Hello in it and it still breaks after being deployed.
The initial error pointed to react-image-gallery (as seen in the picture I'm sharing), so I uninstalled that and got rid of the component but then the error just keeps going down the tree to another component, then another component....
The stack overflow posts about this particular error point to circular dependency issues or importing exporting things incorrectly. Why isn't this showing up locally then? I still took this advice and scoured my code to see if somewhere in my work I introduced something.
Expected behavior
Webb App is working in the local environment, after its built and deployed it is not working.
Reproduction steps
Travel to https://dev.jacobwazydragcourse.click/ open up console
App Id
d2nnfn8ylufs60
Region
us-east-2
There are a bunch of questions already covering this exact error, but I've been through all of them, and so far none of the answers have worked for me. Platform is MacOS
Here is the error:
Steps to reproduce
(Following official React Navigation docs https://reactnavigation.org/docs/getting-started/):
Create a new expo managed app
expo init my-app
Navigate to directory
Start the app
expo start
**** At this point everything starts and works correctly ****
Install reactnavigation(follow official docs https://reactnavigation.org/docs/getting-started/ )
yarn add #react-navigation/native
Install dependencies
expo install react-native-screens react-native-safe-area-context
Wrap the code with a Navigation container (per the docs)
Start the app
expo start
**** App no longer works. Fails with the error I posted earlier ****
Things I've tried that haven't worked
The instructions that the error message provides (though I skip step 1, as I don't have watchman watches installed). Main thing here that I would expect to work is the deletion of node_modules and yarn.lock, but no luck :(. Same with deleting cache
using yarn add to add the dependencies instead of expo install
using npm to install everything
updating expo-sdk (I'm already on latest)
reinstalling everything
So, I actually was able to answer my own question in the process of writing it. I often do this, as I make sure to spend several hours trying to debug in the process of writing the question and making sure I've covered everything I can think to try.
Not sure of official self answer etiquette, but this was a pretty frustrating error for me, so I figure I'll post what worked for me here in case it can help anyone else in the future.
Answer:
The issue for me had nothing to do with the code or app itself, but rather the IOS simulator. Force quitting the simulator and restarting resolved the error. It seems that simply ctrl^c -> expo start -> i -> r is not enough to clear the internal state of the simulator.
There was actually even a clue in the error message itself, but I missed it because the error looked so similar to the one I was expecting. The clue was in the name of the module it was unable to resolve "#react-navigation/native-stack". In my reproduction steps, I was only using the NavigationContainer, as I was trying to get that working before installing any of the Navigators and trying to use those.
Why was it trying to resolve the native-stack navigator? I'm not 100% sure, but my guess is that there was some kind of cache in the simulator that wasn't being cleared properly. Why do I think that?
This problem started with me trying to use a native-stack navigator in another app I'm working on. I quickly ran into this error, and figured the best way to debug would be to spin up a brand new blank app and try to get ReactNavigation working in there. I started with just navigation package and NavigationContainer itself, and once I couldn't even get that working, I assumed the problem was with the base react-navigation package installation. I failed to notice that it was still trying to resolve that native-stack navigator.
So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.
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.