Next-auth: Next.js build error

[alex-cory]

Describe the bug
I'm getting a build error in my nextjs app. When running next build I end up getting this output.

$ next build
info  - Loaded env from /Users/alex/code/my-project/.env
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/alex/code/my-project/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/alex/code/my-project/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Compile server
> Using external babel configuration
> Location: "/Users/alex/code/my-project/.babelrc"
Creating an optimized production build  
Failed to compile.

./node_modules/typeorm/browser/driver/DriverFactory.js
Attempted import error: 'AuroraDataApiPostgresDriver' is not exported from './postgres/PostgresDriver'.

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/alex/code/my-project/node_modules/next/dist/build/index.js:13:917)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here's my /api/auth/[...nextauth].js

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import adapter from 'next-auth/adapters'


const options = {
  site: process.env.SITE || 'http://localhost:3000',

  // Configure one or more authentication providers
  providers: [
    Providers.Twitter({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET
    }),
    // Sign in with passwordless email link
    Providers.Email({
      server: process.env.MAIL_SERVER,
      from: '[email protected]'
    }),
  ],
  callbacks: {
    session: async (session, user) => {
      const { getUserByEmail } = await adapter.Default({}).getAdapter()
      const { id } = await getUserByEmail(session.user.email)
      session.user.id = id
      return session
    }
  },

  // A database is optional, but required to persist accounts in a database
  database: process.env.USER_DB_URL,
}

export default (req, res) => NextAuth(req, res, options)

To Reproduce
next build

Expected behavior
When running locally, everything seems to work. I added NEXTAUTH_URL="https://my-project-alexcory.my-project.vercel.app" to the .env. Any ideas?

I just found https://github.com/typeorm/typeorm/issues/6110 and looks like it's from [email protected]. Maybe switch from typeorm@^0.2.24 to [email protected] in package.json?

[plunkettscott]

I just started getting this as well. Happened over the last few minutes.

[alex-cory]

I did a temporary fix by doing:

1. rm -rf node_modules
2. search in yarn.lock for typeorm and replace the one next to next-auth that says typeorm@^0.2.24 to [email protected]. Save the file
3. yarn
   If this doesn't work I also did yarn add -D [email protected], will remove this later...

[alex-cory]

But, now I'm getting

Failed to compile.

./node_modules/mongodb/lib/url_parser.js
Module not found: Can't resolve 'dns' in '/Users/alex/code/trufans/node_modules/mongodb/lib'


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/alex/code/trufans/node_modules/next/dist/build/index.js:13:917)

And I commented out all of my mongo code. Which means it has to be from next-auth.

[alex-cory]

Here it says:

This error most likely means you are trying to do something from the client-side that needs to be done on the server-side. If MongoDB module can't find the DNS component, it's running on the client-side.

[plunkettscott]

Yep. I am fighting errors left and right on this trying to work around it.

[plunkettscott]

I was getting that same 'mongodb' error when I just added the following to my package.json.

  "resolutions": {
    "typeorm": "0.2.24"
  }

This basically does what you were doing, but without needing to worry about Yarn making changes to it again.

[plunkettscott]

Looks like it's working now with resolutions set like before. I'm not sure what the difference was the last time.

[alex-cory]

You got it building successfully?

[plunkettscott]

Yep. With setting resolutions like above it is building now. Is it still not working for you?

[alex-cory]

Still failing... with the dns error...

[alex-cory]

What version of next-auth you using?

[plunkettscott]

I have it pinned at ^3.0.1 and 3.0.1 is installed currently. Might be worth removing the yarn.lock file as well as the node_modules and .next directories. After that let Yarn rebuild the yarn.lock and node_modules with resolutions set.

[alex-cory]

Getting:
ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/alex/code/my-project/node_modules/require_optional'
🤔

[plunkettscott]

Yep. That's now what I'm trying to figure out right now. I thought that it was just me. If I remove my next-with-apollo wrapper that error goes away, so I assumed it was me. Must still be something with this package.

[alex-cory]

He is using fs in here.

[plunkettscott]

I saw that. That shouldn't be the cause, though. The only file that uses fs that is not a test or a script is in src/css/index.js, but that actually just returns pre-compiled CSS in the NPM build. It looks sort of like this in the build:

module.exports = function() { return ":root{--color-background:#fff;--color-primary:#444;-- /* ... */

[alex-cory]

Were you able to get it to build after removing next-with-apollo?

[plunkettscott]

Yes, but I have to remove the ApolloProvider from @apollo/react-hooks as well. I have it wrapping my _app page as well, but if it's there I get the fs error. This was all working earlier.

[iaincollins]

@alex-cory @plunkettscott Have you tried getting started with the example project?

It has a live demo and the build is definitely working for me and on the demo site.

Just to see if anything has changed recently I reset the package-lock.json on the example and it's still working fine for me, including with [email protected]. I'm not getting any errors when building for production or in development mode.

This sounds like something specific to your app, especially as there are interactions with other modules and what sound like multiple issues going on here. It does seem to me from the errors that server side code is getting compiled into the front end.

If it is a problem with NextAuth.js it should be possible to replicate it with the example project. If you can replicate this problem with the example site, or have a specific change request please do raise a new issue.

[Maximilian-Schalk]

I had the same problem. I realized after an hour it was me importing the library wrong.
I had import {signIn} from 'next-auth and not import {signIn} from 'next-auth/client'

[iaincollins]

I had the same problem. I realized after an hour it was me importing the library wrong.
I had import {signIn} from 'next-auth and not import {signIn} from 'next-auth/client'

Oh boy, I worry about exactly this sort of confusion! I have done exact that, but it's more obvious to me as I'm half expecting me to do it.

Thanks for the follow up and feedback.

Maybe we can improve this by doing something like halting in a way that spits out an error if the main lib detects it's being used in that context, to avoid frustration.

[alex-cory]

I was still importing from 'next-auth/client' so not sure if that was the problem for me.

[plunkettscott]

I also don’t think this was my problem. Looking back on it, that’s not the import I have. I could definitely see that causing problems though.
On Jul 31, 2020, 8:20 PM -0500, Alex Cory [e-mail], wrote:

I was still importing from 'next-auth/client' so not sure if that was the problem for me.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[arunoda]

I had import {signIn} from 'next-auth and not import {signIn} from 'next-auth/client'

I had this exact same issue in a live stream. And I struggle for more than 30 min to find the root cause

[iaincollins]

I had import {signIn} from 'next-auth and not import {signIn} from 'next-auth/client'

I had this exact same issue in a live stream. And I struggle for more than 30 min to find the root cause

@arunoda Oh no, I'm sorry to hear that! :-(

I wasn't able to join the livestream yesterday as I had a call scheduled at the same time.

I'll ask the folks at Next.js if they have any suggestions as to how we could detect the context something is running under so we can spit out a helpful error when this happens.

[arunoda]

@iaincollins

Oh no, I'm sorry to hear that! :-(

Ha ha. I don't think that's an issue with next-auth.

It'd be nice if Next.js can detect such cases and warn.

[arunoda]

@iaincollins created a discussion on the Next.js repo: https://github.com/vercel/next.js/discussions/15999