Repository: next.js
Issue:  Route Handlers Crash with bcrypt (see: #46493)
Labels: examples

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC PMX 6.5.11-8 (2024-01-30T12:27Z)
  Available memory (MB): 2048
  Available CPU cores: 2
Binaries:
  Node: 18.19.0
  npm: 9.2.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.0.0
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.2.2
Next.js Config:
  output: N/A
```


### Which example does this report relate to?

next-learn/dashboard/starter-example/

### What browser are you using? (if relevant)

Firefox 126.0.1

### How are you deploying your application? (if relevant)

npm run dev

### Describe the Bug

I have been following [this guide](https://nextjs.org/learn/dashboard-app/), and in chapter 15, when setting [`login-form.tsx`](https://github.com/vercel/next-learn/blob/main/dashboard/starter-example/app/ui/login-form.tsx) as a client component with `"use client";`, I get the following error:

```
npm run dev

> dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 2.7s
 ✓ Compiled /middleware in 224ms
 ✓ Compiled (224 modules)
 ○ Compiling /lobby ...
 ⨯ ./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
./auth.ts
./app/lib/actions.ts
./app/ui/login-form.tsx
 ⨯ ./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
./auth.ts
./app/lib/actions.ts
./app/ui/login-form.tsx
 GET /lobby 500 in 5046ms
 ⨯ ./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
./auth.ts
./app/lib/actions.ts
./app/ui/login-form.tsx
 GET /lobby 500 in 747ms
 GET /lobby?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Ffavicon.ico 500 in 27ms
```
![screenshot](https://github.com/vercel/next.js/assets/117137859/548aaa30-3fc2-4e4f-8d1d-08a84768d631)

I read of the same issue in [Route Handlers Crash with bcrypt #46493 ](https://github.com/vercel/next.js/issues/46493), so I even tried to add `serverComponentsExternalPackages` to `next.config.js`
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['bcrypt'],
  },
}

module.exports = nextConfig;
```

[`auth.ts`](https://nextjs.org/learn/dashboard-app/adding-authentication)
```
import { z } from 'zod';
import bcrypt from 'bcrypt';

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { sql } from '@vercel/postgres';

import { authConfig } from './auth.config';
import type { User } from '@/app/lib/definitions';
 
async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
    return user.rows[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
 
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;
          const passwordsMatch = await bcrypt.compare(password, user.password);

          if (passwordsMatch) return user;
        }

        console.log('Invalid credentials');
        return null;
      },
    }),
  ],
});
```

### Expected Behavior

_no response_

### To Reproduce

_no response_