Next.js webpack5 enabled issue

[followbl]

Just realized that having webpack 5 installed as a dependency isn't enough to trigger next.js to build with version 5 if you have a custom next.config.js

Has anyone be able to get the build to work with a the official import Adapters from 'next-auth/adapters'; as a dependency. I've tried virtually everything but cannot get webpack5 to work...4 works great, but as soon as I enable

future: {
  webpack5: true,
},

I get ModuleNotFoundError: Module not found: Error: Can't resolve 'mongodb'

and if I ignore all of the providers...

     config.plugins.push(
       new options.webpack.IgnorePlugin({
         resourceRegExp: /^mongodb|hdb-pool|@sap\/hana-client|better-sqlite3|hdb-pool|ioredis|mongodb|mssql|mysql2|oracledb|pg-native|pg-query-stream|react-native-sqlite-storage|react-native-sqlite-storage|redis|sql.js|sqlite3|typeorm-aurora-data-api-driver$/,
       })
     );

I get

> Build error occurred
Error: Cannot find module './mysql'

right at the end of the build...pretty lost, anyone run in to this yet?

[followbl]

@balazsorban44 if of interest - here's a minimal reproduction of the webpack5 issue. https://github.com/followbl/webpack5-next-auth - just run yarn run build to see the build error.

[balazsorban44]

Hmm, in your https://github.com/followbl/webpack5-next-auth/blob/main/pages/api/auth/%5B...nextauth%5D.ts I cannot see that you actually configured a database.

The Email Provider can be used with both JSON Web Tokens and database sessions, but you must configure a database to use it. It is not possible to enable email sign-in without using a database.

See: https://next-auth.js.org/providers/email

This is because the generated token must be saved somewhere (in a database).

[balazsorban44]

Another thought is that https://github.com/christkv/require_optional causes problems with Webpack 5. We really should be getting rid of it in my opinion. It hasn't been maintained for 3 years now, and it is openly just a hack for something that should be built-in. Looks like it finally is:
npm: https://docs.npmjs.com/cli/v7/configuring-npm/package-json#peerdependenciesmeta
yarn: https://yarnpkg.com/configuration/manifest#peerDependenciesMeta

Had an issue mentioning it, but nothing happened since then: #1012

I am no expert on the topic, and I don't know how breaking this change would be, or if it is even a solution for your problem you are facing. I also haven't used Webpack 5 yet.

cc @iaincollins might have some other ideas.

[followbl]

@balazsorban44 I can update the example to be valid, but to be clear this happens for any configuration though...it's unrelated to email provider vs any other provider.

[followbl]

@balazsorban44 went ahead and made this a valid example for you, error still shows up. https://github.com/followbl/webpack5-next-auth/blob/main/pages/api/auth/%5B...nextauth%5D.ts

Lmk, if there's a specific ask you'd like me to look in to around the peerDependencies configuration you mention above.

[balazsorban44]

#1682

still uses that akward require_optional, but we could maybe just use dynamic imports there. I tried with webpack 5 enabled in our Next.js app, and it worked fine. (not using typeorm or any adapters for that matter)

[followbl]

@balazsorban44 or for anyone else that runs across this - nextauth works great with webpack5 if you remove the target: serverless in your next.config.js - I didn't know this wasn't a recommended practice anymore.

[balazsorban44]

could you link me to where it says it's not recommended? #2048 is an issue about exactly that usecase!

Update: I think I found it vercel/next.js#20487 (comment)

[followbl]

@balazsorban44 yup. That's the one - my apologies I didn't include.

Learn something new everyday - excited to be on webpack5 now.