Next js ai SDK with google generative ai and langchain is causing edge runtime module not found error

Question

I am building a "chat with your document" chatbot using Vercel AI SDK, Nextjs 14 app router for the chat interface, Google Generative AI for the chatbot and Langchainjs to process the uploaded document (PDF to text parsing, splitting the text, create embeddings, saving it to a vector database and querying the embeddings to extract a context).

On user input, the useChat hooks will hit POST /api/chat api routes, and before sending the user-input to genai, i would first extract the context and build the Message[]

Without the extract the context, the app works just fine. But as soon as i add the context extraction, the console started to go crazy with the Module not found errors.

I browsed around for solutions, a lot of the solution suggested me to add a webpack config in my nextjs.config.js by adding <module>: false for the config.resolve.fallback for every module i found giving the errors, and i ended up with the following

/** @type {import('next').NextConfig} */
module.exports = {
  ...
  webpack: (config, { webpack }) => {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    config.externals['node:fs'] = 'commonjs node:fs'
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      // buffer: false,
      crypto: false,
      // events: false,
      http: false,
      https: false,
      net: false,
      querystring: false,
      os: false,
      path: false,
      // querystring: false,
      stream: false,
      // tty: false,
      // util: false,
      zlib: false,
      tls: false,
      child_process: false,
    }
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /^node:/,
        (resource) => {
          resource.request = resource.request.replace(/^node:/, '')
        },
      ),
    )

    return config
  },
  ...
}

It doesn't give me the Module not found error anymore, instead its giving me this error

⨯ node_modules/gaxios/node_modules/agent-base/dist/index.js (33:0) @ <unknown>
⨯ Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

At this point, i have no idea what to fix and where should i fix it, and i got a feeling that is not an optimal solution.

From the errors i can tell that what's causing this is mostly the @langchain/community packages, i have also browse around solutions related to the edge-runtime and langchain with no luck, please help