Could anybody be so awesome on help me on the MongoDB connection?

Elindo · June 7, 2022, 7:33pm

# TypeError: Cannot read properties of undefined (reading 'db')

So I have this portion of code that goes like this:
from this page here:

Elindo586/nextprojectb/blob/main/pages/inventory.js

import React from "react";
import { useEffect, useState } from "react";
import Head from "next/head";
import Link from "next/link";
import Pagination from "react-bootstrap/Pagination";

import { clientPromise } from "../utils/mongodb";

export async function getStaticProps() {
  // await clientPromise;
  // `await clientPromise` will use the default database passed in the MONGODB_URI
  // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
  //
  const client = await clientPromise;
  const db = client.db("parts");
  //
  // Then you can execute queries against your database like so:
  // db.find({}) or any of the MongoDB Node Driver commands

  return {

This file has been truncated. show original

import { clientPromise } from "../utils/mongodb";

export async function getStaticProps() {
  // await clientPromise;
  // `await clientPromise` will use the default database passed in the MONGODB_URI
  // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
  //
  const client = await clientPromise;
  const dbs = client.db("parts");
  //
  // Then you can execute queries against your database like so:
  // db.find({}) or any of the MongoDB Node Driver commands

  return {
    props: { db },
    revalidate: 60,
  };
}

const Inventory = ({ db }) => {

I am getting an error in line 15 like this:

error - pages\inventory.js (15:21) @ getStaticProps
TypeError: Cannot read properties of undefined (reading 'db')
  13 |   //
  14 |   const client = await clientPromise;
> 15 |   const db = client.db("parts");
     |                     ^

I am importing the connection from utils/mongodb here…

github.com

Elindo586/nextprojectb/blob/main/utils/mongodb.js

import { MongoClient } from "mongodb";

const uri = process.env.NEXT_PUBLIC_MONGODB_URI;
const options = {};

let client;
let clientPromise;

if (!process.env.NEXT_PUBLIC_MONGODB_URI) {
  throw new Error("Please add your Mongo URI to .env.local");
}

if (process.env.NEXT_PUBLIC_MONGODB_URI === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;

This file has been truncated. show original

^^^ this connection I think it is working as I am not getting any errors there any more.

But in the page in which I am calling for the connection, and then trying to extract the collection doesn’t seem to recognize the part of client.db

Sylvant · June 7, 2022, 7:47pm

You might wanna add a console log and see what you get as client value. Also, it looks a little bit odd you dont call clientPromise with parenthesis- clientPromise()

Elindo · June 7, 2022, 10:30pm

The console is giving me this below:

 at getStaticProps (webpack-internal:///./pages/inventory.js:30:23)
    at async Object.renderToHTML (file://C:\Users\Edgar\Desktop\Stuff\Acode\nextprojectb\node_modules\next\dist\server\render.js:492:20)
    at async doRender (file://C:\Users\Edgar\Desktop\Stuff\Acode\nextprojectb\node_modules\next\dist\server\base-server.js:901:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (file://C:\Users\Edgar\Desktop\Stuff\Acode\nextprojectb\node_modules\next\dist\server\base-server.js:1006:28)
    at async (file://C:\Users\Edgar\Desktop\Stuff\Acode\nextprojectb\node_modules\next\dist\server\response-cache.js:74:36)

This code is for Next.js the clientPromise is an import of the connection file for MongoDB under utils/mongodb.js