bcrypt issue

[avmentzer]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
------------------------------------------

- error ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

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

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./components/helpers/registerUser.tsx

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

no link

To Reproduce

use bcrypt

Describe the Bug

loading bcrypt results in this error

Expected Behavior

no error

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[JesseKoldewijn]

Are you trying to use bcrypt on a client component by chance?

[avmentzer]

it's a server component. It currently works with bcrypt-ts.

[JesseKoldewijn]

I would guess that there might be a misconfig in your tsconfig setup since server components should have access to node modules.

[avmentzer]

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/": ["./"] } }, "include": ["next-env.d.ts", "/*.ts", "*/.tsx", ".next/types//*.ts"], "exclude": ["node_modules"] }

[JesseKoldewijn]

Hmm weird, have you tried installing fs into the project itself? (I know, you shouldn't have to but worth to try right)

[634750802]

same problem in next 13.4.3

[aimehai]

Same problem in next 13.4.3

[haythamfouda]

Any news? I have the same issue with Next 13.4.3

[sebadiaz-arg]

Same issue here with "next": "13.2.4" and using "bcrypt": "^5.1.1".

[sebadiaz-arg]

May be it is related with this situation: https://stackoverflow.com/a/73929977/7191548

[haythamfouda]

I ended up using "bcryptjs" instead. It's working fine with no errors.

[JesseKoldewijn]

And you're sure you're not trying to use bcrypt on the browser side? @avmentzer Because that would be my last guess on this issue

[SudeepGowda55]

Yes "bcryptjs" works fine in client-side of next js

[elgatoflaco]

I solved it by adding "use server" at the top line of the file that used bcrypt.

What's curious is that if I use TypeScript, I don't have to set that flag.

Using Next.js 14 with app router.

[CzechCoder]

I'm using Next.js 14 with app router and bcrypt didn't have any problems with webpack but suddenly the errors showed up somewhere down the line without me changing any configs. Weird. It just keeps saying "Critical dependency: the request of a dependency is an expression"