#Can't resolve 'fs' with next-auth email provider + nodemailer

1 messages · Page 1 of 1 (latest)

wary seal
#

I'm trying to set up auth with an email provider through Next-Auth.
Here's my code:

EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),

And here's the action used when the user submit its email:

'use server';

import { signIn } from 'next-auth/react';

import { successToast } from '@/components';
import 'server-only';

type EmailSignInData = {
  email: string;
};

export async function emailSignIn(formData: FormData) {
  const data = Object.fromEntries(formData) as EmailSignInData;
  await signIn('email', data);
  successToast(`Link sent to ${data.email}`);
}

Here's the error I'm getting : Can't resolve 'fs'

sharp baneBOT
#

Hi @wary seal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, it seems like you're encountering a common issue with Next.js where the 'fs' module can't be resolved. This is because 'fs' (File System) is a Node.js built-in module and it's not accessible in the client-side code, which is where Next.js runs by default.

However, the knowledge sources do not provide a direct solution to your specific issue with Next-Auth and Nodemailer. They do mention similar issues with the 'fs' module, but the context is different and the solutions may not apply to your case.

I recommend checking the official Next.js and Next-Auth documentation or their respective GitHub issues for more specific guidance. If you're still stuck, consider asking for help in relevant online communities.

Here are some useful links:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary seal kapa.ai is still learning and improving, please let us know how it did by reacting below

wary seal
#

@sharp bane Do I need to add 'use server' at the top of this file:

import { cache } from 'react';

import { getServerSession } from 'next-auth';

import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import prisma from 'lib/prisma';

import type { Me } from '@/types';
import type { Session } from 'next-auth';

export const getMe = cache(async (): Promise<Me | null> => {
  try {
    const session = await getServerSession(authOptions);
    const id = session?.user?.id;
    if (!id) {
      throw new Error('ID not found');
    }
    const me = await prisma.user.findUnique({
      where: { id },
      include: { tenant: { select: { company: true, logo: true } } },
    });
    if (!me) {
      return null;
    }
    return me as Me;
  } catch (error) {
    throw new Error('Error fetching user');
  }
});

export const getUserId = cache(
  async (session: Session): Promise<string | null> => {
    try {
      const id = session?.user?.id;
      if (!id) {
        throw new Error('ID not found');
      }
      const user = await prisma.user.findUnique({
        where: { id },
        select: {
          id: true,
        },
      });
      const userId = user?.id ?? null;
      return userId as string;
    } catch (error) {
      throw new Error('Error fetching user');
    }
  },
);
sharp baneBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the knowledge sources provided, the 'use server' directive is used to mark a file or function as a Server Action in Next.js. This directive should be placed at the top of a file or at the top of an async function.

However, in your provided code, you are using the cache function from React, which is not an async function. According to the Github Issue 62926 (https://github.com/vercel/next.js/issues/62926), Next.js throws an error when a non-async function is exported from a file with the 'use server' directive.

Therefore, you should not add the 'use server' directive to this file as it stands. If you need to make these functions Server Actions, you would need to refactor them to be async functions.

Please note that this advice is based on the information provided in the knowledge sources and may not cover all aspects of your specific use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary seal kapa.ai is still learning and improving, please let us know how it did by reacting below

wary seal
#

@sharp bane I'm getting this error: Can't resolve 'fs' and here's the trace:

Import trace for requested module:
./node_modules/.pnpm/nodemailer@6.9.14/node_modules/nodemailer/lib/mailer/index.js
./node_modules/.pnpm/nodemailer@6.9.14/node_modules/nodemailer/lib/nodemailer.js
./node_modules/.pnpm/next-auth@4.24.7_next@14.2.4_@babel+core@7.22.17_@playwright+test@1.45.0_react-dom@18.2.0_rea_gzlr2t2z4ugtaaczpg6oxqwe6a/node_modules/next-auth/providers/email.js
./src/app/api/auth/[...nextauth]/route.ts
./src/actions/get-me/index.ts
./src/actions/index.ts
./src/modules/profile/Update.tsx
sharp baneBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error Can't resolve 'fs' typically occurs when you're trying to use Node.js built-in modules (like 'fs' for file system operations) in client-side code. In Next.js, all code by default runs on the client-side, unless specified otherwise.

In your case, it seems like the 'fs' module is being imported somewhere in the dependency tree of your 'nodemailer' or 'next-auth' packages. This is likely causing the issue, as these modules are not designed to be used on the client-side.

To resolve this issue, you need to ensure that the code using these packages is running server-side. In Next.js, you can use API routes or getServerSideProps/getStaticProps in your pages to run server-side code.

If you're already doing this and still encountering the issue, it might be a problem with the specific versions of 'nodemailer' or 'next-auth' you're using. In this case, consider checking their respective GitHub issues or documentation for any known issues and solutions.

Here are some useful links:

Please note that this advice is based on the information provided in the knowledge sources and may not cover all aspects of your specific use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary seal kapa.ai is still learning and improving, please let us know how it did by reacting below

wary seal
#

@sharp bane I'm not getting the error when I do this:

'use server';

import { cache } from 'react';

import { getServerSession } from 'next-auth';

import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import prisma from 'lib/prisma';

import type { Me } from '@/types';
import type { Session } from 'next-auth';

export const getMe = cache(async (): Promise<Me | null> => {
  try {
    const session = await getServerSession(authOptions);
    const id = session?.user?.id;
    if (!id) {
      throw new Error('ID not found');
    }
    const me = await prisma.user.findUnique({
      where: { id },
      include: { tenant: { select: { company: true, logo: true } } },
    });
    if (!me) {
      return null;
    }
    return me as Me;
  } catch (error) {
    throw new Error('Error fetching user');
  }
});

export const getUserId = cache(
  async (session: Session): Promise<string | null> => {
    try {
      const id = session?.user?.id;
      if (!id) {
        throw new Error('ID not found');
      }
      const user = await prisma.user.findUnique({
        where: { id },
        select: {
          id: true,
        },
      });
      const userId = user?.id ?? null;
      return userId as string;
    } catch (error) {
      throw new Error('Error fetching user');
    }
  },
);

Is it good or should I remove the cache or remove the 'use server' and change the getServerSession ?

sharp baneBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the knowledge sources provided, the 'use server' directive is used to mark a file or function as a Server Action in Next.js. This directive should be placed at the top of a file or at the top of an async function.

In your provided code, you are using the cache function from React, which is not an async function. According to the Github Issue 62926 (https://github.com/vercel/next.js/issues/62926), Next.js throws an error when a non-async function is exported from a file with the 'use server' directive.

However, if you're not encountering any errors with your current setup, it might be working as expected. The 'use server' directive at the top of the file might be causing the entire file to be treated as a Server Action, which could be why you're not encountering the 'fs' module error.

As for the getServerSession function, it's part of the Next-Auth library and is designed to work with server-side code, so it should be fine in a Server Action.

However, please note that this advice is based on the information provided in the knowledge sources and may not cover all aspects of your specific use case. If you're unsure, consider checking the official Next.js and Next-Auth documentation or their respective GitHub issues for more specific guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: