@kevinSmith @DanCouper
I had originally created the .git folder in restaurant-reviews folder, but that is where I ran into with my git.
@lasjorg
I tried copying the code from package-json file but it didn’t change the outcome.
So I’ve started over. I managed to fixed Git as well as the ReactDOM issue 
So thanks a lot for your feedback @kevinSmith @DanCouper @lasjorg @SwedishErik
Now back to the blank page issue. Yes, I am still getting a blank page. I suspect it has something to do with the App.js file. Reason for my suspicion is, as soon as I edit that page according to the tutorial, it prints a blank page. I can’t pin-point. I get this 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
useInRouterContext hooks.tsx:61
useHref hooks.tsx:32
LinkWithRef index.tsx:267
React 12
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
I am still not sure how to fix this. I have made a repo for my code:
first of all you have to wrap all your routes inside the BrowserRouter.
secondly react router no longer accepts render, component instead you can use element
eg:
<Route path='/' element={<RestaurantsList />} />
the path should be a string , passing as an array is also not supported
I’m also getting some errors when I try to start.
I went to the repo to get his package.json to make sure there isn’t a version mismatch.
Then I’m getting errors for packages not being imported.
Is this the original project or have you been modifying it?
I have been unable to even get to where you are having your problem so I am wondering if the repo is right or if you have some global packages on which it is relying.
The package.json is missing some dependencies like react-router-dom
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
try this one
@adramelech Thanks for the feedback. I am trying to figure out where I should edit in App.js. Some of it makes sense but some of it is a bit confusing.
So I’m guessing this wouldn’t work. @adramelech
<div className="container mt-3">
<Routes>
<Route exact path={["/", "/restaurants"]} element={RestaurantsList} />
<Route path="/restaurants/:id/review" element={(props) => (<AddReview {...props} user={user} />)}/>
<Route path="/restaurants/:id" element={(props) => (<Restaurant {...props} user={user} />)}/>
<Route path="/login" element={(props) => (<Login {...props} login={login} />)}/>
</Routes>
</div>
</div>
No, but it would in the previous version of react router dom. If you wish to follow the tutorial you can use react-router-dom version below 6
@adramelech
I’m still getting a blank page. I’ve used your suggestion for package.json as well as edited App.js file.
This is what my code looks like:
return (
<BrowserRouter>
<div className="App">
<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 href="/" 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 login={login} />}/>
</Routes>
</div>
</div>
</BrowserRouter>
);
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