skip to Main Content

So I’ve tried to implement an authentication with Mongodb on my app, and after installing nextauth v5 (currently in beta), and trying to put any component or page on the "client side," my app would just crash, and nothing would work. I’ve tried to downgrade the versions nextauth and Mongodb, but still nothing happened, meanwhile I figured out some things:

(I also need to use useState, useEffect ect…)

1.

Here is the link for the code and how it works or just check down below this link

 import { signIn } from "@/auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("google")
      }}
    >
      <button type="submit">Signin with Google</button>
    </form>
  )
} 
  • app would work like this because the component is generally not on client side only action function uses use server but after trying to add use state or use effect or generally just putting "use client" app would drop the error : Module not found: Can’t resolve ‘child_process’

error image
So on this image you can see this path (./node_modules/mongodb/lib/client-side-encrpytion/mongocrptd_manager.js) that leads to this : const { spawn } = require(‘child_process’);

image of require(‘child_process’)

I have no idea if I can somehow bypass this: it still pops up an error after I delete this requirement. I have no idea if there is any fix for this. Also you can check my repo link down below this:.

here is the link for github repo

i ve tried deleting the require for this ‘child_process’, downgrade all packages, using "client side" that caused the issue and obv didnt work…, also setting webpack childprocess to false didnt work…

2

Answers


  1. you cannot using child_process, fs like system libs on front end (Browser).

    Next js supported server technology, you can use on that libs. i not remember next js but its like them:

    serverSideProps(){
    
    //calling child_process
    }
    
    What I mean is that in your case, the library should only run on the server.
    
    Login or Signup to reply.
  2. I am using next version 14.2 and next-auth version 5.0.0-beta.19

    this is working for me

       "use client";
    
    import React from "react";
    import { signIn } from "next-auth/react";
    const LoginButton = () => {
      return (
        <button
          onClick={() => signIn("google")}
          type="submit"
        >
          <i className="fab fa-google"></i>
          <span>Google</span>
        </button>
      );
    };
    
    export default LoginButton;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search