I was following along with the How to use the MERN Stack: A Complete Guide and I have had issues troubleshooting the errors in Chrome Dev Tools after starting the server and the client. I installed typescript in both folders and enabled type checking so as to try fixing any underlying syntax or import issues. I updated all imports to ES6 and updated the index.js to use the React 18 version of importing React-DOM.
The errors that appear in the console are:
-
Invalid hook call
-
Uncaught TypeError: Cannot read properties of null (reading ‘useRef’)
-
The above error occurred in the componenet: at BrowserRouter (http://localhost:3000/static/js/bundle.js:46422:5)
I also have several errors in the server folder that are noted with TypeScript:
- Argument of type Router is not assignable to parameter of type String server/server.js
app.use(require(recordRoutes));
- Argument of useNewUrlParser is not assignable to parameter of type MongoClientOptions. Object literal may only specify known properties, and useNewUrlParser does not exist in type MongoClientOptions server/db/conn.js
const client = new MongoClient(Db, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
- Expected 0 arguments, but got 1 /server/routes/record.js
let db_connect = getDb(“CoffeeList”);
Any help on clearing these errors would be greatly appreciated! Cheers