MERN STACK tutorial: Create React Frontend got blank page

Hi,

When trying to follow the video https://www.youtube.com/watch?v=mrHNSanmqQ4, after starting using the Route from react-router-dom (1:23:17 of the video), I just got blank page after npm start.

When I checked the page source, I saw that
“you need to enable javascript to run this app”
but I already enabled javascript in my chrome. I am very confused.

I am using react-router-dom 6.3.0.
I would greatly appreciate any suggestions.

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

import AddReview from "./components/add-review";
import Restaurant from "./components/restaurant";
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>
      <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" 
            element={RestaurantsList} />
          <Route 
            path="/restaurants/:id/review"
            element={(
              <AddReview />
            )}
          />
          <Route 
            path="/restaurants/:id"
            element={(
              <Restaurant />
            )}
          />
          <Route 
            path="/login"
            element={(
              <Login />
            )}
          />
        </Routes>
      </div>
    </div>
  );
}

export default App;

The noscript tag is just something to show users if they don’t have JS enabled. If you aren’t getting that message, don’t worry about it.

What is the console saying?

I don’t see anything wrong.

If I don’t see anything in the console, I might just put:

return (
  <p>Howdy, world!</p>
)

for the return block. If that does, then the issue is somewhere in your JSX. If not, it’s somewhere else. Narrow it down like that.

Can you put this in a repo so we can try it out?

I’d suggest installing the same version of react-router-dom as used in the tutorial (looks like @5.2.0). Otherwise, you have to adjust the router code.

1 Like

Thanks for the suggestions, Kevin.

  1. I have uploaded everything to GitHub repo https://github.com/jiezheng5/RestaurantReviews2

  2. I followed your suggestion to add

return (
  <p>Howdy, world!</p>
)

but I still don’t see anything in the console nor the browser.

Thanks for you time.

  1. Thanks for the suggestion, lasjorg.

  2. To make sure that I use the same dependency as in the video tutorial without starting over, I tried to manually copy https://github.com/beaucarnes/restaurant-reviews/blob/master/package-lock.json to update my local /RESTAURANTS-REVIEWS/package.json and rerun npm install inside frontend folder, I got so many “dependency error because you manually …”.
    I am a newbie to web development. Is there any way I can have npm to downgrade my react-router-dom from 6 to 5 without redo the project from the beginning because I finally got the backend to work.

Thanks for your time.

I don’t even see where you installed react-router-dom in the frontend folder. It appears you accidentally installed it in the root folder for your project. Delete the node_modules folder, the package.json and the package-lock.json located in the root folder and the update your dependencies to include version 5.2.0 of react-router-dom.

You will also want to install bootstrap in the frontend folder also.

Hi, RandellDawson:

Thanks for the reply.

I have a node_modules folder in my frontend/node_modules.
I added the node_modules to my .gitignore, otherwise I got the following message forever when I push git add ..

thanks for your time.

Then keep removing/commenting out until you get it to work. Then start adding things in until it stops working and narrow down where the problem is.

When I run your code I get this in the console:

ERROR in ./src/App.js 7:0-80
Module not found: Error: Can’t resolve ‘react-router-dom’ in ‘D:\dev\zzz\RestaurantReviews2\frontend\src’

ERROR in ./src/App.js 8:0-46
Module not found: Error: Can’t resolve ‘bootstrap/dist/css/bootstrap.min.css’ in ‘D:\dev\zzz\RestaurantReviews2\frontend\src’

ERROR in ./src/index.js 7:0-49
Module not found: Error: Can’t resolve ‘react-router-dom’ in ‘D:\dev\zzz\RestaurantReviews2\frontend\src’

Have you installed react-router-dom? And can you get that css from a CDN? Or at least set up the resource?

@RandellDawson already told you what to do.

react-router-dom should be installed in the client and not the root, same with bootstrap.

Thanks very much, kevin, Randell, and lasjorg, I finally got blank page issue fixed. It is the dependency version.
Is it safe for me to delete /RESTAURANT-REVIEWS/NODE_MODULES, i.e., node_modules folder in the root which I might accidentally installed? Will it mess up my working backend or frontend?

Thanks for your time.

You can safely delete it. Everything needed for the frontend is in its own node_modules folder.

Thanks very much for all the help.