Encountering a connection issue with mongoose while using Webpack

Ever since today, I've been encountering an issue when trying to establish a connection to MongoDB using Mongoose within my Next.js application. The error message I'm getting is as follows. Can anyone provide some guidance on how to resolve this?

Uncaught (in promise) TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function at mongoDBConnection

app/new/FileUpload.tsx:

import mongoDBConnection from "../lib/mongoDb";

useEffect(()=> mongoDBConnection()),[]}

app/lib/mongoDB.ts:

import mongoose from "mongoose";

const mongoDBConnection = async () =>
await mongoose.connect(process.env.MONGO_URL as string);

export default mongoDBConnection;

next.config.js:

 /** @type {import('next').NextConfig} */
 const nextConfig = {
 webpack: (config) => {
 config.experiments = { ...config.experiments, topLevelAwait: true };

 return config;
},
 reactStrictMode: true,
 experimental: {
 serverActions: true,
 appDir: true,
 serverComponentsExternalPackages: ["mongoose"],
 },
 images: {
  domains: ["fakestoreapi.com", "firebasestorage.googleapis.com"],
 },
};

module.exports = nextConfig;

Answer №1

Task completed successfully. The resolution involved moving the connection call to the server side, specifically within the app/api/ directory for future reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Developing a foundational Repository class in TypeORM

Are you looking to create a custom baseRepository class that extends TypeORM's Repository? import { Repository } from 'typeorm'; export abstract class BaseRepo extends Repository<T> { public getAll ( ...

Storing the timestamp along with the geographic coordinates in GeoJSON format

Utilizing GeoJson to store coordinates along with a timeStamp in a Mongoose database, the model is defined as follows: var positionSchema = mongoose.Schema({ position: [{ properties: { timeStamp: Date }, geometry: { type: { ...

Determine the type of input and output based on another argument

When working with a function that takes an object of either TypeA or TypeB, the first parameter is used to specify the type of the object and the returned type depends on this first parameter. The issue arises in TypeScript where the type of the object is ...

I'm curious about what exactly happens when the NextJS Link component is triggered and how we can effectively capture and respond

As I was developing a simple navbar that uses a JSON data to dynamically generate its links, I encountered the need to visually persist the active link/route. To achieve this, I experimented with two different implementations: Initial approach: In the Me ...

The addition of an asynchronous call caused Array.map to start experiencing errors

I am working on a React component that iterates through an array of messages and renders JSX based on certain conditions: messages.map(async (msg) => { let previewImage: URL | undefined = undefined; if (msg.mediaId) { previewImage = await stora ...

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

I am working on an interface with the following structure: interface Res<R = any> { first?(): Promise<R>; second(arg: { response: R }): void; } However, I noticed that when creating a plain object based on this interface, the response ...

Working with Typescript and JSX in React for event handling

I'm currently facing an issue with updating the state in a React component I'm developing using TypeScript (React with Addons 0.13.3, Typescript 1.6.0-dev.20150804, definition file from ). /// <reference path="react/react-addons.d.ts" /> i ...

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

Retrieve and update the most recent entry

Here is the schema I am working with: var BudgetInfoSchema = mongoose.Schema({ user_email: { type: String, required: true }, user_budget: { type: Number, required: true }, platforms_budget: { type: [{ platform_id: { type: String, required ...

Using ng2 to retrieve an object from an HttpGet service

I'm currently facing an issue with retrieving JSON data from my WebAPI. Every time I attempt to use the returned object in my component, it displays as undefined. The goal is to showcase student and course data on the homepage of my website. Currentl ...

The Link element in NextJS does not function properly with hash id links

I'm having trouble getting the Link element (next/link) to scroll to a specific part of a page using the hash id. Is there a workaround or solution for this issue? <Link href="/#kontakt" className={styles.anchor} aria-label="Kontakt& ...

Similar to the getState() function in react-redux, ngrx provides a similar method in Angular 6 with ngrx 6

Recently, I developed an application with react and redux where I used the getState() method to retrieve the state of the store and extract a specific slice using destructuring. Here's an example: const { user } = getState(); Now, I am transitioning ...

Export interface for material-ui wrapper to cast any type in TypeScript (React)

I work with React using TypeScript. Recently, I encountered an issue with exporting. I'm creating an interface that encapsulates components from Material-ui. Here is a simplified example: Wrapping.tsx import { default as Component, ComponentProps ...

Troubleshooting Typescript Compilation Error in React - Cannot assign type 'Element' to type 'FunctionComponent<{}>'

The code snippet originally utilized - import { Create } from '@material-ui/icons'; <DroppableFolder count={draftsCount} sidebarOpen={open} folderId={FolderType.Drafts} Icon={Create} name="Dr ...

"Angular application experiencing navigation blockage due to multiple concurrent HTTP requests using RxJS - Implementation of priority-based cancel queue

I've come across similar threads, but I have yet to find a suitable solution for my specific issue. Situation: Currently, I'm navigating on both the server side and client side simultaneously. This entails that every frontend navigation using ro ...

Issue with Ionic Native File: File.writeFile function - file is not being created and there is no callback response

I've exhausted all the different solutions I could find, but unfortunately, the file isn't getting saved and nothing seems to be happening. The callback functions aren't being called - neither success nor error. Here are the solutions I&apo ...

Creating trendy designs with styled components: A guide to styling functional components as children within styled parent components

I am looking to enhance the style of a FC styled element as a child inside another styled element. Check out the sandbox example here const ColorTextContainer = styled.div` font-weight: bold; ${RedBackgroundDiv} { color: white; } `; This resul ...

Encountered an "Error - ENOENT" message when attempting to create a lambda function using CDK

I have a Node.js project that serves as a lambda authorizer in AWS. The structure of the project is outlined below: /authorizer /lib -index.js -package.json -node_modules -package.lock.json Currently, I am developing a CDK in TypeScript to esta ...

What is the best way to retrieve a specific child element from a MongoDB collection using a specific key?

I'm dealing with a group of users structured like this: { _id: myid, name : 'blabla', ia : { [0]-> 'an id', [1]-> 'a second id' } } My goal is to retrieve only the first id in the ia section, s ...

What is the best way to perform a partial search in mongoDB or mongoose?

My User schema model is as follows: const userSchema = new mongoose.Schema( { firstname: { type: String, required: true, trim: true }, lastname: { type: String, trim: true }, email: { type: String, unique: true, ...