Next.js Discord

Discord Forum

I am encountering with this MongoDB error

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
âš  ./node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'aws4' in 'C:\Users\shukur.huseynli\Documents\vscode_projects\chatwithme\node_modules\mongodb\lib'

Import trace for requested module:
./node_modules/mongodb/lib/deps.js
./node_modules/mongodb/lib/client-side-encryption/client_encryption.js
./node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./models/Channels.ts
./app/(channels)/channels/page.tsx
Answered by Ray
I think you should to create a route handler to fetch the data from mongodb if you want to do client side fetching
View full answer

9 Replies

Alligator mississippiensisOP
"use client"
import React, { useEffect } from 'react'
import {Input} from "@nextui-org/react";
import { SearchIcon } from 'lucide-react';
import Channels from '@/models/Channels';
import connect from '@/utils/server-helper';

async function getChannels() {
    await connect();
    const res = await Channels.find({});
    console.log(res)
}

function ChannelsPage() {
    useEffect(()=>{
        getChannels()
    },[])
  return (
    <main className='pt-10 w-4/5 min-h-screen'>
        <div className='flex justify-between sticky'>
            <h1 className='text-[20px] font-bold '>Browse all channels</h1>
            <Input
                innerWrapper: "bg-transparent",
                inputWrapper: [
                    "shadow-xl",
                    "bg-default-200/50",
                    "dark:bg-default/60",
                    "backdrop-blur-xl",
                    "backdrop-saturate-200",
                    "hover:bg-default-200/70",
                    "dark:hover:bg-default/70",
                    "group-data-[focused=true]:bg-default-200/50",
                    "dark:group-data-[focused=true]:bg-default/60",
                    "!cursor-text",
                ],
                base:"w-1/4"
                }}
                placeholder="Type to search..."
                startContent={
                <SearchIcon width={20} className="pt-2 text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
                }
            />
        </div>
    </main>
  )
}

export default ChannelsPage

this is where I encounter with this issue.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Channel')
this is what my browser console says
import mongoose, { Schema } from "mongoose";

const ChannelSchema = new Schema(
  {
    chnl_id: { type: String, required: true },
    createdBy: { type: String, required: true },
    chnl_name: { type: String, required: true },
    chnl_desc: { type: String, required: true },
    category: { type: String, required: true },
  },
  { timestamps: true }
);

export default mongoose.models.Channel ||
  mongoose.model("Channel", ChannelSchema);

this is how I defined my mongoose schema.
Also I tried to do what the people says in this StackOverflow question.
https://stackoverflow.com/questions/68610456/module-not-found-cant-resolve-aws4
but it didn't solve my problem, either.
Alligator mississippiensisOP
this is my next.config.js file:
/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental:{
        serverComponentsExternalPackages:["mongoose"],
    },
    

 webpack: (config) => {
        config.resolve.fallback = {
          "mongodb-client-encryption": false,
          "aws4": false
        };
         return config;
     }
}

module.exports = nextConfig
@Ray hi, could you help me about this, I will appreciate it
I should I have been using Prisma instead.
Answer
Alligator mississippiensisOP
yeah it solved my problem! Thanks again, Ray. I really appreciate that!