MERN-1

Modified on Fri, 17 Feb, 2023 at 4:28 PM

Getting a blank screen and error on the console when I run npm start for the first time. (ID: MERN11)


Actually, this bug has been created deliberately in the form of an activity. The reason for the blank is that you might have not provided the container root in the index.js file where your ReactDOM has rendered the main App Component. You just need to provide the root there.

    

But how come just mentioning the root solves our problem?

When Browser gets a response from the server and starts rendering, it goes to the root file which in most cases is public/index.html, and renders the same file first.

Inside this HTML a <div> element is written whose id is "root"

<div id="root"> <div>

Then control goes to another file which is index.js.Inside this .js file, a component is used (in most React apps this component is called <App/>.

ReactDOM.render( <App /> document.getElementById("root"), );


This <App/> component is the first component that is rendered on the screen. Every Component is defined inside this component or its children.
And document.getElementById("root") renders the index.html file that is the root file.
This is how all the components are rendered and your React App starts working.


I have started the backend on the terminal but it's not working on the frontend. (ID: MERN12)


There can be two reasons for the issue:

  • Your endpoint might not be correct. Check the endpoint in the App.js file and also check the path mentioned in it. Check your API endpoint in the Network Tab, and make sure it doesn’t have any extra “ / ” in between.

  • You might have not updated the workspace IP in the ipConfig.json file. Make sure you update it by using the ./setup.sh command in your terminal.


My register page is working perfectly fine but still, these two test cases are failing:
 should show a success alert if the request succeeds (686 ms) 
 should show an error alert with a message sent from the backend if the request fails (631 ms)? (ID: MERN13)


This is related to the body you have passed to /auth/register endpoint in the register function. Make sure it only contains the username and password, and not the confirmPassword property. 
You need to pass only these two properties and not the confirmPassword one because the backend API is designed in such a way that it accepts only two parameters i.e. username and password. This is also mentioned in the milestone, as follows:


Also check that, in case of error handling, you have properly displayed the message from the error object.

How come this fixes the issue?
As test cases check for exact strings in the messages to be given in enqueueSnackbar, having proper messages help us solve the issue. And, as we are passing only username and password in the body of the POST request, as required by the backend, we are successfully able to make a POST request.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article