Fails in Next.js app/ directory incl. with API Route Handlers #979

karlhorky · 2023-02-27T15:15:39Z

What went wrong?

Using bcrypt within a Route Handler in Next.js (API Route Handler within the new app/ directory) causes the app to crash with unusual errors:

error - ./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/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./app/api/route.ts

I also reported over here in the Next.js repo:

Route Handlers Crash with bcrypt vercel/next.js#46493

What did you expect to happen?

bcrypt should work in the app/ directory, including in Route Handlers

Which version of nodejs and OS?

    Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Mon Feb 27 2023 14:52:57 GMT+0100 (Central European Standard Time)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 7.13.6
    Relevant packages:
      next: 13.2.2-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

If you find a bug, please write a failing test.

Ok, maybe once I find out more.

The text was updated successfully, but these errors were encountered:

karlhorky · 2023-02-27T15:20:52Z

Reading this issue in the bcrypt repo over here, it made me think that webpack maybe should not be used to try to bundle bcrypt... 🤔

Cannot bundle bcrypt #874 (comment)

So it occurred to me that maybe I should be using an externals webpack config and marking bcrypt as external:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
+  webpack: (config) => {
+    config.externals = [...config.externals, 'bcrypt'];
+    return config;
+  },
};

module.exports = nextConfig;

Which indeed works (does not work on StackBlitz because the native module does run there):

CodeSandbox demo: https://codesandbox.io/p/sandbox/gracious-bose-wn2731?file=%2Fnext.config.js

karlhorky · 2023-02-27T15:21:11Z

Closing this out here and continuing the discussion over in the Next.js repo:

Route Handlers Crash with bcrypt vercel/next.js#46493

fullStackDataSolutions · 2023-08-10T00:12:41Z

I tried that, I got this error:

./node_modules/next-auth/core/init.js (10:14)
Module not found: Can't resolve 'crypto'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next-auth/core/index.js
./node_modules/next-auth/next/index.js
./node_modules/next-auth/index.js
./app/api/auth/[...nextauth]/route.ts

ibrahimullah12 · 2024-01-09T07:13:21Z

I had the same problem. The problem was solved by installing and importing. Instead of bcrypt install bcryptjs.

> npm i bcryptjs 

> npm i -D @types/bcryptjs

daenerys973 · 2024-01-14T09:28:03Z

I'm integrating authentication with nextauth v5 in nextjs 14.0.4 with prisma and I just got the error, I don't know, but bcryptjs worked instead of bcrypt

breno404 · 2024-01-16T13:01:20Z

I'm a little scared to install bcryptjs because its last publication was 7 years ago and there are at least 40 issues open

0rogerinho · 2024-01-25T01:15:09Z

This error happens when you run bcrypt on the client side, to correct it if you don't want to use it on the client side but the error is still returning, check that all the places where you are using bctypt have "use server"

umair-mirza · 2024-02-05T18:10:09Z

Issue is still not resolved with Next.js 14.0. Still getting the error while using Client component

xcodewhisperer · 2024-02-10T14:33:38Z

Same error with argon2. I'm looking for a workaround

mohamed-younes16 · 2024-02-15T19:28:59Z

I had the same problem. The problem was solved by installing and importing. Instead of bcrypt install bcryptjs.
> npm i bcryptjs 

> npm i -D @types/bcryptjs

thank you it worked

razzededge · 2024-02-16T23:22:06Z

Same error with argon2. I'm looking for a workaround

I'm on the same boat... got error with argon2

umair-mirza · 2024-02-17T07:11:53Z

Finally got around the issue. Here's how you can fix this:

First, in next.config.js

push bcrypt to config.externals like so:

  webpack: (config) => {
    config.externals = [...config.externals, "bcrypt"];
    return config;
  },

Then where ever you are using bcrypt,

instead of importing it in the traditional way (import bcrypt from 'bcrypt')

You need to import it like so:

const bcrypt = require("bcrypt");

And make sure to put it above the line where it's being used. For example,

    const bcrypt = require("bcrypt");

    const hashedPassword = await bcrypt.hash(password, 12);

token-ed · 2024-02-21T15:24:22Z

@umair-mirza Thanks brother.

udayprakash80 · 2024-04-03T00:50:21Z

Thanks @umair-mirza .. great man

hariyebk · 2024-04-05T10:07:49Z

@umair-mirza 🙏🏻

Olaw2jr · 2024-04-15T18:23:33Z

I'm integrating authentication with nextauth v5 in nextjs 14.0.4 with prisma and I just got the error, I don't know, but bcryptjs worked instead of bcrypt

Could you let me know if you were able to get this resolved?

mikhatanu · 2024-04-16T08:17:21Z

Hello. i'm encountering this problem in next js 14 middleware. Any solution?

nin-o · 2024-04-18T00:10:11Z

For me the solution was to use:
import { signIn } from 'next-auth/react';
instead of:
import { signIn } from '@/auth';

razzededge · 2024-04-18T05:47:08Z

For me the solution was to use: import { signIn } from 'next-auth/react'; instead of: import { signIn } from '@/auth';

You will not get custom event handlers etc this way, also you are importing client side only code and @/auth means your custom auth implementation which you changed to one delivered with the next-auth package - if this solves your particular case, then fine - but I would advise against it in most cases as the problem within this thread is that it doesn't work on server side components

theogenejr · 2024-04-24T20:25:45Z

Tried all solution. The one using bcryptjs instead of bcrypt worked just fine for me.
npm i bcryptjs
npm i -D @types/bcryptjs

pulgueta · 2024-05-03T14:57:18Z

Still have the same issue for bcrypt, argon2, @node-rs/bcrypt and @node-rs/argon2 on Next.js 14.2.3. Set the serverComponentExternalPackages for all 4 of these packages and the Webpack configuration but still no solution. Had to use bcryptjs for now.

ezeparziale · 2024-05-09T00:11:16Z

I'm integrating authentication with nextauth v5 in nextjs 14.0.4 with prisma and I just got the error, I don't know, but bcryptjs worked instead of bcrypt

I replaced bcrypt with bcryptjs, and everything works okay.

Running with:

nextauth 5.0.0-beta.17
nextjs 14.1.3

pulgueta · 2024-05-09T22:54:44Z

I'm integrating authentication with nextauth v5 in nextjs 14.0.4 with prisma and I just got the error, I don't know, but bcryptjs worked instead of bcrypt

I replaced bcrypt with bcryptjs, and everything works okay.

Running with:

nextauth 5.0.0-beta.17

nextjs 14.1.3

Me too. Used bcryptjs and works well but super slow.

hoanglq · 2024-05-10T09:03:03Z

Instead of using bcrypt, we should use bcryptjs.
Here is my approach, you can try to solve the issue:

//const bcrypt = require("bcrypt");
var bcrypt = require('bcryptjs');

//...your codes
//const passwordsMatch = await bcrypt.compare(password, user.password);
const passwordsMatch = await bcrypt.hashSync(password, user.password);

muhammadkeyton · 2024-05-12T17:40:18Z

Hey guys this is a known issue with bcrypt, bcrypt is a native module and when nextjs tries to import it in the client side, this error happens, a simple fix is to make the file where you are importing and using bcrypt to be a server file, add the ' use server' at the top,this should fix it, it worked for me

ezeparziale · 2024-05-12T22:43:22Z

I'm integrating authentication with nextauth v5 in nextjs 14.0.4 with prisma and I just got the error, I don't know, but bcryptjs worked instead of bcrypt

I replaced bcrypt with bcryptjs, and everything works okay.
Running with:

nextauth 5.0.0-beta.17

nextjs 14.1.3

Me too. Used bcryptjs and works well but super slow.

After several attempts, I managed to get bcrypt working with auth.js v5.0.0-beta.17.

The key lies in performing the bcrypt.compare operation in the auth.ts file, where it operates without issues, as opposed to placing it within the auth.config.ts file, where it fails.

The auth.ts file must be with the {...authConfig + providers}, this way it works 100% with bcrypt.

Example: https://github.com/ezeparziale/quark/blob/main/src/auth.ts

karlhorky mentioned this issue Feb 27, 2023

Route Handlers Crash with bcrypt vercel/next.js#46493

Closed

1 task

karlhorky closed this as completed Feb 27, 2023

Kevin-Kwan mentioned this issue Jan 20, 2024

Login Page and Auth API Implementation Kevin-Kwan/kevin-kwan.github.io#22

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fails in Next.js app/ directory incl. with API Route Handlers #979

Fails in Next.js app/ directory incl. with API Route Handlers #979

karlhorky commented Feb 27, 2023

karlhorky commented Feb 27, 2023

karlhorky commented Feb 27, 2023

fullStackDataSolutions commented Aug 10, 2023 •

edited

ibrahimullah12 commented Jan 9, 2024

daenerys973 commented Jan 14, 2024

breno404 commented Jan 16, 2024

0rogerinho commented Jan 25, 2024

umair-mirza commented Feb 5, 2024

xcodewhisperer commented Feb 10, 2024

mohamed-younes16 commented Feb 15, 2024

razzededge commented Feb 16, 2024

umair-mirza commented Feb 17, 2024 •

edited

token-ed commented Feb 21, 2024

udayprakash80 commented Apr 3, 2024

hariyebk commented Apr 5, 2024

Olaw2jr commented Apr 15, 2024

mikhatanu commented Apr 16, 2024

nin-o commented Apr 18, 2024

razzededge commented Apr 18, 2024 •

edited

theogenejr commented Apr 24, 2024

pulgueta commented May 3, 2024

ezeparziale commented May 9, 2024

pulgueta commented May 9, 2024

hoanglq commented May 10, 2024

muhammadkeyton commented May 12, 2024

ezeparziale commented May 12, 2024

Fails in Next.js app/ directory incl. with API Route Handlers #979

Fails in Next.js app/ directory incl. with API Route Handlers #979

Comments

karlhorky commented Feb 27, 2023

What went wrong?

What did you expect to happen?

Which version of nodejs and OS?

If you find a bug, please write a failing test.

karlhorky commented Feb 27, 2023

karlhorky commented Feb 27, 2023

fullStackDataSolutions commented Aug 10, 2023 • edited

ibrahimullah12 commented Jan 9, 2024

daenerys973 commented Jan 14, 2024

breno404 commented Jan 16, 2024

0rogerinho commented Jan 25, 2024

umair-mirza commented Feb 5, 2024

xcodewhisperer commented Feb 10, 2024

mohamed-younes16 commented Feb 15, 2024

razzededge commented Feb 16, 2024

umair-mirza commented Feb 17, 2024 • edited

token-ed commented Feb 21, 2024

udayprakash80 commented Apr 3, 2024

hariyebk commented Apr 5, 2024

Olaw2jr commented Apr 15, 2024

mikhatanu commented Apr 16, 2024

nin-o commented Apr 18, 2024

razzededge commented Apr 18, 2024 • edited

theogenejr commented Apr 24, 2024

pulgueta commented May 3, 2024

ezeparziale commented May 9, 2024

pulgueta commented May 9, 2024

hoanglq commented May 10, 2024

muhammadkeyton commented May 12, 2024

ezeparziale commented May 12, 2024

fullStackDataSolutions commented Aug 10, 2023 •

edited

umair-mirza commented Feb 17, 2024 •

edited

razzededge commented Apr 18, 2024 •

edited