mongodb-developer/mern-stack-example

Mern Stack code for the Mern Tutorial

mern-stack-example

Mern Stack code for the Mern Tutorial

How To Run

Create the file mern/server/config.env with your Atlas URI and the server port:

ATLAS_URI=mongodb+srv://<username>:<password>@sandbox.jadwj.mongodb.net/
PORT=5050

Start server:

cd mern/server
npm install
npm start

Start Web server

cd mern/client
npm install
npm run dev

Disclaimer

Use at your own risk; not a supported MongoDB product

mern-stack-example's Issues

TypeError: Cannot read properties of undefined (reading 'collection')

Hi, I'm pretty new to this. I cloned the repo, but I get this error as soon as the client app loads:

TypeError: Cannot read properties of undefined (reading 'collection')
at C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\routes\record.js:19:6
at Layer.handle [as handle_request] (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:275:10)
at Function.handle (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:174:3)
at router (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:47:12)
MongoServerSelectionError: connection to 35.232.129.9:27017 closed
at Timeout._onTimeout (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\mongodb\lib\core\sdam\topology.js:439:30)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7) {
reason: TopologyDescription {
type: 'ReplicaSetNoPrimary',
setName: null,
maxSetVersion: null,
maxElectionId: null,
servers: Map(3) {
'ac-0bptifw-shard-00-00.9kna9aa.mongodb.net:27017' => [ServerDescription],
'ac-0bptifw-shard-00-01.9kna9aa.mongodb.net:27017' => [ServerDescription],
'ac-0bptifw-shard-00-02.9kna9aa.mongodb.net:27017' => [ServerDescription]
},
stale: false,
compatible: true,
compatibilityError: null,
logicalSessionTimeoutMinutes: null,
heartbeatFrequencyMS: 10000,
localThresholdMS: 15,
commonWireVersion: null
}
}

The only thing that I've changed is adding the config.env file. Does anyone know why this could be happening?

Attempted import error: 'withRouter' is not exported from react-router

Hi, getting this issue:

./src/components/edit.js
Attempted import error: 'withRouter' is not exported from 'react-router'.

I noticed package.json on a new project does not contain the following line: "react-router-dom": "^5.2.0", I guess this means if you follow instructions as per the blog: https://www.mongodb.com/languages/mern-stack-tutorial it does not uses the latest version.

I therefore made the code exactly like code files on Github but still getting this issue, please advise.

Mern Tutorial web page has an old record.js sample code

On the tutorial web page, the record.js offered uses person_name, person_group, person_level which do not map to the forms and cause display issues.

Also, the last line of the delete record uses:
response.status(obj); instead of response.json(obj) which prevents the recordList component from updating.

These will trip you up if you just try to "code along" and use the sample code from the tutorial web page. Code found here in github has these changes and works as expected.

In some cases "myFirstDatabase" is used, in others "employees" is used. Probably best to create a single process.env.DATABASE in config.env for consistency.

React hooks Functional Components?

Was attempting to update the components of this into React Hooks functional components instead of class components, but I'm a little new and am kind of confusing myself. Any chance for a react hooks version?

navbar.js button not working

The code example in navbar.js creates a navigation bar that displays the links.
When the browser window is small enough a button is displayed, but when the button is clicked the dropdown is not displayed.

please update the code in navbar.js to address this issue
Regards

App opens to a blank screen

When running the app, it opens to a blank screen on localhost:3000

Several issues with details

1. names do not match, in server/routes/record.js, within recordRoutes, names do not match names from client side, it should be
   let myobj = {
   person_name: req.body.name,
   person_position: req.body.position,
   person_level: req.body.level,
   };

2. delete does not refresh the page with new records because it is not within a form. A form should be added.

Uncaught (in promise) Error: Request failed with status code 404

First of all, It happened on my personal copy of the project, so i went and pulled this repo and still get the same error.

Upon creating a new record, after clicking the "Create Person" button, it doesn't add the record. I get the 404 error in console, although, when I catch the error, it stills shows the 404 code with no additional information.

I tried to manually send HTTP requests via Postman and it prints "Cannot POST /record/add". Using GET on /records should list all records, yet it throws 200 OK and returns empty React page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--link rel="icon" href="/favicon.ico" /-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--script src="../src/index.js" ></script-->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

I don't know where it is the problem, but judging from the fact that I get it on both my own, and this freshly pulled repo, it seems that the tutorial itself has an error. I'd appreciate if someone could've looked at it.

Needs tags

This repository should be tagged with mongodb, nodeJS, react, etc and given a better description

Add a how to run section to README.md

Missing MongoDB Connection Import in server.js

In the server.js file of our project, there's an essential component missing: the import statement for MongoDB connection. This oversight could potentially lead to runtime errors or issues when attempting to interact with the database.

Expected Behavior:
There should be an import statement for the MongoDB connection module/library.

Actual Behavior:
The import statement for MongoDB connection is missing.

Proposed Solution:

Server.js
import express from "express";
import cors from "cors";
import records from "./routes/record.js";
import dotenv from "dotenv"
import conn from "./db/connection.js"; //importing conn function from db/conncection.js file
const PORT = process.env.PORT || 5050;
const app = express();
dotenv.config();
app.use(cors());
app.use(express.json());
app.use("/record", records);

// start the Express server
app.listen(PORT, () => {
conn(); //add this for connecting to database
console.log(Server listening on port ${PORT});
});

TypeError: Cannot read property 'db' of undefined

I've tried doing the How to Use MERN Stack: A Complete Guide but keep getting an error with the server/db/conn.js file on line 13:

_db = db.db("myFirstDatabase");

There error is:

TypeError: Cannot read property 'db' of undefined

Connecting via the Node code generated by Atlas works just fine. Also, I cloned the GitHub repo and get the exact same error. The actual function call is this:

  connectToServer: function (callback) {
      client.connect(function (err, db) {
          _db = db.db("myFirstDatabase");
          return callback(err);
          console.log("Successfully connected to MongoDB.");
      });
  }

But, literally, nothing is getting assigned to the db parameter when called. The Atlas connection code only has one parameter: err.

I've tried this on both macOS 11.3.1 and Debion 10.9 and the exact same thing happens. Since it happens on the GitHub code, I know that I'm not the one causing it by accidentally doing something wrong. And, since the Atlas connection code works, I know that the URI is correct.

Please advise on what I need to do to fix this and then please update the website and GitHub with the information as well. Thank you!

Version Numbers:

Node: 14.17.0
Npm: 6.14.13

While this is easy to reproduce and you can get the error info yourself, here it is in all of its glory:

mern-stack-example/mern/server/node_modules/mongodb/lib/utils.js:691
          throw error;
          ^

TypeError: Cannot read property 'db' of undefined
at mern-stack-example/mern/server/db/conn.js:14:16
    at mern-stack-example/mern/server/node_modules/mongodb/lib/utils.js:688:9
    at mern-stack-example/mern/server/node_modules/mongodb/lib/mongo_client.js:257:23
    at connectCallback (mern-stack-example/mern/server/node_modules/mongodb/lib/operations/connect.js:365:5)
    at mern-stack-example/mern/server/node_modules/mongodb/lib/operations/connect.js:552:14
    at connectHandler (mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/topology.js:286:11)
    at cb (mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/topology.js:684:18)
    at mern-stack-example/mern/server/node_modules/mongodb/lib/cmap/connection_pool.js:348:13
    at mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/server.js:282:16
    at Object.callback (mern-stack-example/mern/server/node_modules/mongodb/lib/cmap/connection_pool.js:345:7)

Proposal for Integrating Schemas in Backend

Currently, our backend lacks a structured approach to data modeling, specifically the absence of schemas. This can lead to issues related to data consistency, validation, and ease of maintenance. To address this, I propose integrating schemas into our backend architecture.