MERN tutorial Chapter: Create React Frontend

I am getting a blank white page. There is no navigation bar, nothing.

Does anyone have any ideas as to what I can do to resolve this?

Hi @FriendlyCoder
Could you provide a link to the resource you are referring to? I think that could help you get some help with this quicker.

@SwedishErik
Sorry for the late reply. The below image was what I got from inspecting the page. I’m doing this MERN tutorial and got stuck on the Create React Frontend chapter:

It would be extremely helpful if you posted the code that is throwing the error rather than just screenshots of the errors.

But the first error is extremely self-explanatory. You are using ReactDOM version 18, and it is telling you that you need to use the createRoot function it supplies rather than the deprecated render function you are currently trying to use. For example:

import { createRoot } from "react-dom/client";
import App from "./App";

const rootEl = document?.getElementById("root");

if (rootEl) {
  const root = createRoot(rootEl);
  root.render(<App />);
}

The second/third etc errors mean you are doing something wrong with a hook or hooks (for example trying to call a hook function within an if statement or a loop, which won’t work). However, without showing the code, not possible to tell what you’ve done.

@DanCouper
Thanks for the reply. I’m very new to this. I don’t get any error messages, the page is just blank. The only bit of code I have with render is this:

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

import AddReview from "./components/add-review";
import Restaurant from "./components/restaurants";
import RestaurantsList from "./components/restaurants-list";
import Login from "./components/login";

function App() {
  const [user, setUser] = React.useState(null);

  async function login(user = null) {
    setUser(user);
  }

  async function logout() {
    setUser(null)
  }

  return (
    <div  className="App">
      Fuck This
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <a href="/restaurants" className="navbar-brand">
          Restaurant Reviews
        </a>
        <div className="navbar-nav mr-auto">
          <li className="nav-item">
            <Link to={"/restaurants"} className="nav-link">
              Restaurants
            </Link>
          </li>
          <li className="nav-item" >
            { user ? (
              <a onClick={logout} className="nav-link" style={{cursor:'pointer'}}>
                Logout {user.name}
              </a>
            ) : (            
            <Link to={"/login"} className="nav-link">
              Login
            </Link>
            )}

          </li>
        </div>
      </nav>

      <div className="container mt-3">
        <Routes>
          <Route exact path={["/", "/restaurants"]} component={RestaurantsList} />
          <Route 
            path="/restaurants/:id/review"
            render={(props) => (
              <AddReview {...props} user={user} />
            )}
          />
          <Route 
            path="/restaurants/:id"
            render={(props) => (
              <Restaurant {...props} user={user} />
            )}
          />
          <Route 
            path="/login"
            render={(props) => (
              <Login {...props} login={login} />
            )}
          />
        </Routes>
      </div>
    </div>
  );
}

export default App;

I tried with createRoot, but I don’t think I know what I am doing bcuz it’s not working

I would suggest you start by using the same versions of the libraries that are used in the tutorial.

Go to the repo and look at the package.json files to see which versions are used.

Hey thanks @lasjorg

I’ve looked at the file but there are a few “versions”. Which one should I choose and how do I install it and run my code on it?
Thanks in advance.

"react-router": {
      "version": "5.2.0",
       .....
}

"react-router-dom": {
      "version": "5.2.0",
       .......
}

"mini-create-react-context": {
      "version": "0.4.1",
        .....
}

"react-is": {
      "version": "16.13.1",
       .....
}


You should be able to just copy the package.json files into the correct folders and then run npm i from within the folders (frontend/backend folders).

I remember running into this error when I was tryng to import a local module. I seem to remember instructions on how to track down the problem at that reactjs link - maybenit was stack overflow.

In any case, if you out this in a repo, it would be easier to help you.

@kevinSmith

Thanks for the reply. I’ve been trying that be fore you wrote yesterday as I thought it would be easier to share my code but I couldn’t get that to work either.

git_error

@lasjorg
I’ll try this and get back to you. Thanks

I’m not sure what git add ./* does. The “Changes not staged for commit” makes it clear that nothing got added/tracked. Usually you do git add . or git add -A as a basic add. I use git add . all day long. I rarely use anything else, unless I’m doing a complex merge and want to track/untrack files individually as I go. If you read the output that you posted, it tells you that git commit -a is an option too.

And please don’t post picture of your output when you don’t need to. It would have been easier to respond if you’d cut and pasted so I could cut and paste things to respond instead of typing them out.

Sorry about that. thanks for the update.

First I followed this webpage:

And I got the same error. then I started searching online for solutions.

Well, it may be that you don’t have changes. Your original post shows unstaged changes, but I don’t know what it is now. What does a git status show you? Normally my basic workflow is:

  1. Make changes to files and save.
  2. Stage changes (git add .)
  3. Commit changes (git commit -m "some comment")
  4. Push changes (git push) [optional - doesn’t have to be for every commit]

When I run:
git init -b main

I get this message:

Initialized empty Git repository in /Users/me/restaurant-reviews/frontend/src/.git/

Right, it’s telling you it worked.

I thought we already had a repo? I don’t understand what we’re doing here.

Wait. You did that in the src directory? I would expect that to be in the root directory, which I assume is frontend.

:grimacing: I think need to delete that .git folder in src/ and re-init in restaurant-reviews/ if I’m understanding the structure correctly (a project with a front and a back end

1 Like

Yeah, that might makes more sense, in terms of app structure. The OP might also check the tutorial again and see in what folder they were told to run this command.