kelektiv/node.bcrypt.js

Fails in next-auth@beta in Next.js 14

igmtink opened this issue ยท 16 comments

  • What went wrong?
    I followed this tutorial provided by Next.js 14
    Using bcrypt inside of auth.config.ts of next-auth@beta in Next.js 14 causes the app to crash with unusual errors:

image

./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

Import trace for requested module:
./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/.pnpm/bcrypt@5.1.1/node_modules/bcrypt/bcrypt.js
./lib/auth/auth.config.ts
  • What did you expect to happen?
    bcrypt should work in next-auth@beta in Next.js 14

  • Which version of nodejs and OS?

Operating System:
  Platform: Windows 11
  Version: 23H2
Binaries:
  Node: 23.3.0
  npm: 10.2.4
  pnpm: 8.12.1
Relevant packages:
  next: 14.0.4
  next-auth: 5.0.0-beta.4
  react: ^18
  react-dom: ^18
  • If you find a bug, please write a failing test.
    Ok, maybe once I find out more.

@igmtink I'm experiencing the same issue. Found any solution?

Experiencing same issue here :/

i don't find any solution until now

Same. Got the same error at version Next.js 13.5. No fix so far.

node-pre-gyp is removed in dependencies:

but new release with this change hasn't come yet

  • this PR got merged last month and is bound with v6.0.0
  • and currently the latest version is v5.1.1

once it releases, this will be resolved (hopefully)

Workaround:

  1. next-learn is taking this way.
 const authConfig = { 
  //...
  providers: [],  // Add providers with an empty array for now
 } 

 const { auth } = NextAuth({ authConfig }) // called in `middleware.ts`
 const { signIn, singOut } = NextAuth({ 
    ...authConfig,
    providers: [
    // your logic with `bcrypt`
   ],
 });
  1. or just use bcryptjs instead.

bcrypt will never be compatible with a server-side bundler platform.

If nextjs allows to exclude some modules to be bundled then it would work

bcrypt will never be compatible with a server-side bundler platform.

@recrsn would you give me a bit more explanation please?

What I understood:

  1. next.js bundlesmiddleware.ts in edge runtime. This is separated from client bundle and server bundle.
  2. node-pre-gyp (node-gyp-build as well) is not compatible with edge runtime.
  3. so when the code importing node-pre-gyp is included in middleware.ts, this throws an error.

I switched from bcrypt to bcryptjs and it worked for me. I had to uninstall bcrypt & @types/bcrypt and install bcryptjs & @types/bcryptjs instead and restart the app (don't know why it didn't work without an uninstallation).

Hope it will work for you

I switched from bcrypt to bcryptjs and it worked for me. I had to uninstall bcrypt & @types/bcrypt and install bcryptjs & @types/bcryptjs instead and restart the app (don't know why it didn't work without an uninstallation).

Hope it will work for you

For me, the crypto module not found error occurs using bcryptjs. Do you have this issue?

I switched from bcrypt to bcryptjs and it worked for me. I had to uninstall bcrypt & @types/bcrypt and install bcryptjs & @types/bcryptjs instead and restart the app (don't know why it didn't work without an uninstallation).
Hope it will work for you

For me, the crypto module not found error occurs using bcryptjs. Do you have this issue?

I do not have this issue, try to remove node_modules, uninstall bcrypt & @types/bcrypt, and try to reinstall node_modules, hope it will work :(

same problem for me. Could make it work locally by using --force to install, but then vercel would crash when building throwing this error:

Expand 7 Lines

08:48:00.993 | Installing dependencies...
08:48:03.565 | npm ERR! code ERESOLVE
08:48:03.568 | npm ERR! ERESOLVE could not resolve
08:48:03.569 | npm ERR!
08:48:03.569 | npm ERR! While resolving: next-auth@5.0.0-beta.4
08:48:03.569 | npm ERR! Found: next@14.0.5-canary.45
08:48:03.570 | npm ERR! node_modules/next
08:48:03.570 | npm ERR! next@"^14.0.5-canary.45" from the root project
08:48:03.570 | npm ERR!
08:48:03.570 | npm ERR! Could not resolve dependency:
08:48:03.570 | npm ERR! peer next@"^14" from next-auth@5.0.0-beta.4
08:48:03.571 | npm ERR! node_modules/next-auth
08:48:03.571 | npm ERR! next-auth@"^5.0.0-beta.4" from the root project
08:48:03.571 | npm ERR!
08:48:03.571 | npm ERR! Conflicting peer dependency: next@14.0.4
08:48:03.572 | npm ERR! node_modules/next
08:48:03.572 | npm ERR! peer next@"^14" from next-auth@5.0.0-beta.4
08:48:03.572 | npm ERR! node_modules/next-auth
08:48:03.572 | npm ERR! next-auth@"^5.0.0-beta.4" from the root project
08:48:03.572 | npm ERR!
08:48:03.572 | npm ERR! Fix the upstream dependency conflict, or retry
08:48:03.573 | npm ERR! this command with --force or --legacy-peer-deps
08:48:03.573 | npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
08:48:03.573 | npm ERR!
08:48:03.573 | npm ERR!
08:48:03.573 | npm ERR! For a full report see:
08:48:03.573 | npm ERR! /vercel/.npm/_logs/2024-01-11T08_48_01_753Z-eresolve-report.txt
08:48:03.573 |  
08:48:03.573 | npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-01-11T08_48_01_753Z-debug-0.log
08:48:03.588 | Error: Command "npm install" exited with 1
08:48:04.713

@2wheeh The edge runtime is not NodeJS, any native modules will not work there

crypto is also a nodejs specific module so bcryptjs may not even work depending on how it performs platform detection.

Workaround:

  1. next-learn is taking this way.
 const authConfig = { 
  //...
  providers: [],  // Add providers with an empty array for now
 } 

 const { auth } = NextAuth({ authConfig }) // called in `middleware.ts`
 const { signIn, singOut } = NextAuth({ 
    ...authConfig,
    providers: [
    // your logic with `bcrypt`
   ],
 });
  1. or just use bcryptjs instead.

Changing from bcrypt to bcryptjs worked for me. Thank you!

This issue still exists , any solution ?

@shumakmanohar try and look if u made a mistake 'use client' -> 'use server' for me it worked this method.