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

daneseuwu · 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

mawiramawira · 2024-06-24T23:26:30Z

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

works for @node-rs/argon2 as well. add it to dependencies, install and import using require syntax

LabelMinsk · 2024-06-27T06:12:53Z

Use it.
Custom generate hash and if you got after build trouble with trust host, set in your .env AUTH_TRUST_HOST=http://localhost:3000

custom by crypto module

 export async function isValidPassword(password: string, hashedPassword: string) {
    return (await hashPassword(password)) === hashedPassword;
}

export async function hashPassword(password:string){

    const arrayBuffer = await crypto.subtle.digest(
        "SHA-512",
        new TextEncoder().encode(password)
    )
    return Buffer.from(arrayBuffer).toString('base64')
}

drilon305 · 2024-07-02T17:19:15Z

For me problem solved: 'use server' instead of 'use client' in a component.

Bro3Simon · 2024-07-16T18:48:01Z

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"

Thanks, this helped me out!

Scenario: I moved my function that uses bycript to a utilities file that had both client and server functions. Even though I only ever called it on the server, it still produced the error during the build.

Fix: I moved all server utility functions to their own file under the api folder. Since it only had server functions, I didn't need to use use server directive. Perhaps the file being under the api folder also has something to do with not needing the use use server directive.

FranckWebPro · 2024-08-01T17:17:32Z

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);

Sadly I have an error which say "bcrypt is not defined" this way, has anyone else encountered this issue?"

ahmad-elshowair · 2024-08-08T06:02:36Z

I was facing similar error:

to solve I did the following:

replace bcrypt with bcryptjs
add the following code to next.config.mjs

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

chriskuech · 2024-08-17T01:58:11Z

Looks like the issue occurs if you have a middleware that indirectly references bcrypt (even though the middleware should be running on the server).

BertramYe · 2024-08-27T17:15:37Z

but what if I use the nextjs 15 rc with the turbo compiler, how can I config and use the bcrypt as the external dependencies? with the similar config here below?

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

kulubaev · 2024-10-16T05:37:14Z

in my case this issue was resolved putting

use server; directive in the file where I used bcrypt
i believe the library intended to be used in server side not client

Bessonov · 2024-12-02T13:21:53Z

My workaround for the issue with bcrypt and a (plain) webpack build: mapbox/node-pre-gyp#308 (comment). Not sure if it will work with Next.js.

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

chriskuech mentioned this issue Aug 17, 2024

Can't use bcrypt in middleware vercel/next.js#69002

Closed

karlhorky mentioned this issue Oct 27, 2024

"Unable to resolve module mock-aws-s3" with Expo Router API Routes + bcrypt expo/expo#32383

Closed

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 Loading

ibrahimullah12 commented Jan 9, 2024

daneseuwu 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 Loading

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 Loading

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

mawiramawira commented Jun 24, 2024 • edited Loading

LabelMinsk commented Jun 27, 2024 • edited Loading

drilon305 commented Jul 2, 2024

Bro3Simon commented Jul 16, 2024

FranckWebPro commented Aug 1, 2024

ahmad-elshowair commented Aug 8, 2024

to solve I did the following:

chriskuech commented Aug 17, 2024

BertramYe commented Aug 27, 2024 • edited Loading

kulubaev commented Oct 16, 2024 • edited Loading

Bessonov commented Dec 2, 2024

fullStackDataSolutions commented Aug 10, 2023 •

edited

Loading

umair-mirza commented Feb 17, 2024 •

edited

Loading

razzededge commented Apr 18, 2024 •

edited

Loading

mawiramawira commented Jun 24, 2024 •

edited

Loading

LabelMinsk commented Jun 27, 2024 •

edited

Loading

BertramYe commented Aug 27, 2024 •

edited

Loading

kulubaev commented Oct 16, 2024 •

edited

Loading