DEV Community: Edgar Lindo

Mongoose connect is not a function... What is wrong?

Edgar Lindo — Wed, 09 Feb 2022 17:01:53 +0000

I have tried to connect mongodb to REACT in a million different ways, using uri, putting the code straight on the ./app, doing the connection in another file and requiring it in the ./app page... nothing has worked.

I believe I have the username and password just fine, along with the database name...

Why am I keep getting these errors and not able to connect?

Why would this code not work to populate html table from MongoDB in REACT?

Edgar Lindo — Mon, 07 Feb 2022 22:33:29 +0000

Below is the code I am trying to implement. Basically just trying to map the table and placing the results in the body... but the code breaks after trying to map()

Would anybody know what could be missing? thanks..

import "./App.css";
import React from "react";

const mongoose = require("mongoose");

main().catch((err) => console.log(err));

async function main() {
  await mongoose.connect(
    "mongodb+srv://name:password@cluster0.gcyyo.mongodb.net/test?retryWrites=true&w=majority"
  );
}

const PartSchema = new mongoose.Schema({
  reference: String,
  description: String,
  replacements: String,
});

const Part = mongoose.model("Part", PartSchema);


function App() {
  return (
    <div className="App">
      <h1>Hello World 5 </h1>
      <table>
        <thead>
          <tr>
            <th>Reference </th>
            <th> Description </th>
            <th>Replacements </th>
          </tr>
        </thead>
        <tbody>
          {Part.map((item) => (
            <tr>
              <td>{item.reference}</td>
              <td>{item.description}</td>
              <td>{item.replacements}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Why am I getting tons of errs when adding mongoose to REACT?

Edgar Lindo — Fri, 04 Feb 2022 20:35:16 +0000

Sure.. I can run npm audit fix --force .. but REACT goes on error after error to the point where it doesn't responds any more..

Is this a mongoose problem? Is there another way to work with it?

What dependencies do I need to work with REACT?

Edgar Lindo — Thu, 03 Feb 2022 23:51:31 +0000

For example, I need to work with MongoDB, so I did install Mongoose.

Do I need nodemon to work with REACT?

This is a list of dependencies that I have on a test run

{ "name": "table2", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "cors": "^2.8.5", "dotenv": "^16.0.0", "express": "^4.17.2", "mongoose": "^6.2.0", "nodemon": "^2.0.15", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "^5.0.0", "save-dev": "^0.0.1-security", "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" ] } }

Why is my "hello world" disappearing after adding the connection code from MongoDB Atlas in my REACT app?

Edgar Lindo — Thu, 03 Feb 2022 23:45:20 +0000

Why is my "hello world" disappearing after adding the connection code from MongoDB Atlas?

The code is fine and showing "Hello world!" on my 3000 port, and as soon as I add the mongoose.connect function, then the port 3000 goes blank and the "Hello world!" disappear. What could be happening?

Yes, I did install mongoose on package.json

`import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

const mongoose = require("mongoose");

mongoose.connect(
"mongodb+srv://:@cluster0.gcyyo.mongodb.net/test?retryWrites=true&w=majority"
);

const partSchema = new mongoose.Schema({
partN: "string",
description: "string",
});

const Part = mongoose.model("Part", partSchema);

ReactDOM.render(

Hello world!

,
document.getElementById("root")
);`