MERN tutorial Chapter: Create React Frontend

path should be a string not an array

Fixed it. still a blank page. This is weird huh.
I get this error message when I inspect the page.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    BrowserRouter index.tsx:151
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
react.development.js:1476

The above error occurred in the <BrowserRouter> component:

BrowserRouter@http://localhost:3000/static/js/bundle.js:46050:7
App@http://localhost:3000/static/js/bundle.js:45:72

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:18525

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    BrowserRouter index.tsx:151
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
react.development.js:1476

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    BrowserRouter index.tsx:151
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
react.development.js:1476
    React 2
    BrowserRouter index.tsx:151
    React 9
    performConcurrentWorkOnRoot self-hosted:1230
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

​

update your code on github

Done. Thanks for your help. Been struggling with this for a couple of days

You have executed npm install after updating the package.json?

no. is it just

npm install

yes ,on the terminal

npm install

added 5 packages, and audited 1414 packages in 4s

171 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

try starting the dev server by npm start now.

It works! Wow. Sooo relieving. Awesome. Now I just hope that I can follow the rest of the tutorial without running into more of thesse problems. I didn’t realise that languages change/develop that fast. Thanks everyone

1 Like

When doing major version updates of libraries you can’t expect old code to work (e.g. from 5.2.0 to 6.2.0).

Again, I would suggest when following a tutorial that you always try to use the same version of libraries as used in the tutorial. That is, if you want to be able to use the same code and reference code in the video and source repo. Tutorials really should provide starter code repos for this very reason and not just finished code repos.

I’d also suggest looking at the YouTube comments. I seem to remember there was missing code in the video (DAO injectdb method call).

I am running into issues again:

There is no text for the buttons only when I click on Login

I have fixed it Fixed.

@kevinSmith
@adramelech
@DanCouper
@lasjorg

Hi again. Can someone please tell me why my webpage looks different from the intended look here?

MY repo can be found here:

Edits were done before “Edited restaurant-list file”

Thanks in advance

Hmmm, I’ve only managed to display the Cuisine list but nothing is displayed on the page, e.g. If I choose American then all the restaurants in this category should be displayed, but the page is still blank.

I need help with this too, I can’t seem to get anything on the page but there are no errors.

See if you can find the solution using useParams() here from @lasjorg :

Do you have a repository other where others can look at your code to see what the problem is?

Thanks! I worked through the problem, but now I can’t see anything when I click view reviews. I’m getting this error:

Matched leaf route at location "/restaurants/5eb3d668b31de5d588f4292c" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
warning @ router.ts:11
useRoutes @ hooks.tsx:353
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
updateFunctionComponent @ react-dom.development.js:20313
beginWork @ react-dom.development.js:22356
beginWork$1 @ react-dom.development.js:27219
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performSyncWorkOnRoot @ react-dom.development.js:25924
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490

I am trying to follow the tutorial in React 6. Here are my notes so far and some example code that covers:

  • instead of
  • useParams() instead of passing props
  • UserContext to manage user
  • not use render()

I do NOT have login working yet. Please post if you figure it out!

App.js - wrap everything in a <UserContext.Provider> tag. This lets everything underneath it access the user object. (Note that you can use UserContext for many things. It’s just a coincidence that I am using it to store the user.)

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

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

export const UserContext = React.createContext(null)

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

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

    async function logout( ) {
        setUser(null);
    }

    return (
        <UserContext.Provider value={user}>
        <div>

Then in restaurant.js you get the restaurant id and user like this:

import React, { useState, useEffect } from "react";
import RestaurantDataService from "../services/restaurant"
import {Link, useParams} from "react-router-dom";
import {UserContext} from "../App";

function Restaurant() {

    const routeParams = useParams();
    console.log(JSON.stringify(routeParams))
    const user = React.useContext(UserContext);
    console.log(user && user.id)
    console.log(JSON.stringify(user))


Lastly your routes should look more like this. I have not finished converting this to the new, more flexible arrangement:

            <Routes>
                <Route path="/" element={<RestaurantsList />}></Route>
                <Route path="/restaurants" element={<RestaurantsList />}></Route>
                <Route path="/restaurant/:id" element={<Restaurant />} />
                <Route exact path="/restaurants/:id/review"

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.