Route Handlers Crash with bcrypt #46493

karlhorky · 2023-02-27T14:01:28Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

    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

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

App directory (appDir: true), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-tteixg?file=app%2Fpage.tsx

To Reproduce

Open the StackBlitz
Click on the button to compile the Route Handler api/route.ts and cause the server crash

Describe the Bug

When importing bcrypt in a Route Handler and compiling that route, the process crashes, being unable to parse the HTML:

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

If this issue is avoided using an html-loader or similar, then further errors appear, about missing mock-aws-s3, aws-sdk, and nock modules:

error - ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:0
Module not found: Can't resolve 'mock-aws-s3'

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
./app/api/route.ts
wait  - compiling /_error (client and server)...
error - ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:0
Module not found: Can't resolve 'mock-aws-s3'

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
./app/api/route.ts

If you install those modules, you get a bunch of critical dependency warnings and other errors like Error: /home/projects/vercel-next-js-cc6lum/.next/server/app/api/package.json does not exist

error - node_modules/@mapbox/node-pre-gyp/lib/pre-binding.js (19:10) @ exports.find
error - Error: /home/projects/vercel-next-js-cc6lum/.next/server/app/api/package.jsondoes not exist
    at exports.find (webpack-internal:///(sc_server)/./node_modules/@mapbox/node-pre-gyp/lib/pre-binding.js:14:15)
    at eval (webpack-internal:///(sc_server)/./node_modules/bcrypt/bcrypt.js:4:31)
    at (sc_server)/./node_modules/bcrypt/bcrypt.js (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:5698:1)
    at __webpack_require__ (file:///home/projects/vercel-next-js-cc6lum/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./app/api/route.ts:5:64)
    at (sc_server)/./app/api/route.ts (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:873:1)
    at __webpack_require__ (file:///home/projects/vercel-next-js-cc6lum/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Froute.ts&appDir=%2Fhome%2Fprojects%2Fvercel-next-js-cc6lum%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fprojects%2Fvercel-next-js-cc6lum&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=!:13:111)
    at (sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Froute.ts&appDir=%2Fhome%2Fprojects%2Fvercel-next-js-cc6lum%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fprojects%2Fvercel-next-js-cc6lum&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=! (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:862:1)
    at __webpack_require__ (file:///home/projects/vercel-next-js-cc6lum/.next/server/webpack-runtime.js:33:43)
    at __webpack_exec__ (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:17114:39)
    at eval (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:17115:28)
    at Object.eval (file:///home/projects/vercel-next-js-cc6lum/.next/server/app/api/route.js:17118:3)
    at Object.function (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:15:143671)
    at Module._compile (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:219079)
    at Module._extensions..js (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:219743)
    at Module.load (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:217769)
    at Module._load (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:215340)
    at Module.require (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:218087)
    at i (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:6:415284)
    at _0x532db6 (https://vercelnextjscc6lum-fscu.w-credentialless.staticblitz.com/blitz.fc57b779eff411414c7b91114df9b720faaf721b.js:15:142939)
    at Object.requirePage (file:///home/projects/vercel-next-js-cc6lum/node_modules/next/dist/server/require.js:88:12)
    at eval (file:///home/projects/vercel-next-js-cc6lum/node_modules/next/dist/server/load-components.js:49:73)
    at async Object.loadComponentsImpl [as loadComponents] (file:///home/projects/vercel-next-js-cc6lum/node_modules/next/dist/server/load-components.js:49:26)
    at async DevServer.findPageComponentsImpl (file:///home/projects/vercel-next-js-cc6lum/node_modules/next/dist/server/next-server.js:599:36) {
  page: '/api'
}
null
warn  - ./node_modules/@mapbox/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/util/versioning.js
./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

./node_modules/@mapbox/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/util/versioning.js
./node_modules/@mapbox/node-pre-gyp/lib/pre-binding.js
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./app/api/route.ts

./node_modules/bcrypt/bcrypt.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/bcrypt/bcrypt.js
./app/api/route.ts

Expected Behavior

Using bcrypt within an API Route Handler should work.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

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

Josehower · 2023-02-27T14:07:46Z

It seems is not only inside of Route Handlers it seems to be in any place inside of app directory. if for example i try to hash something in a server component the error is going to trigger too.

This problem is not new and has been there since to be there since the release of Next.js 13

https://stackblitz.com/edit/vercel-next-js-hhp1ck?file=app%2Flayout.tsx,app%2Fpage.tsx

karlhorky · 2023-02-27T15:17:14Z

Also reported in bcrypt repo over here: kelektiv/node.bcrypt.js#979

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

Workaround

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 kelektiv/node.bcrypt.js#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

cc @sokra is this a good solution here?

JesseKoldewijn · 2023-02-27T16:01:55Z

It's not really a solution for the initial problem but have you tried using Pufferfish2 instead of bcrypt?

balazsorban44 · 2023-02-28T01:10:53Z

@Josehower

This problem is not new and has been there since to be there since the release of Next.js 13

Not a bug, this is documented here: https://beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

You could add serverComponentsExternalPackages: ["bcrypt"] to your next.config.js#experimental config, which currently will work for Route Handlers too (noted that the name is confusing either case). Trying to confirm with the rest of the team if this is what we will be recommending or use a different bundling strategy for Route Handlers.

karlhorky · 2023-02-28T06:21:36Z

Thanks for the answer @balazsorban44 🙌

this is documented here: beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

Ah nice, wasn't aware of these details, cool 👍

Workaround

So another (more official) workaround is something like this:

next.config.js

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

module.exports = nextConfig;

noted that the name is confusing either case

Trying to confirm with the rest of the team if this is what we will be recommending or use a different bundling strategy for Route Handlers

Thanks for that, yeah maybe the name needs to change to appDirExternalPackages or split to a second config key routeHandlersExternalPackages. (unless Route Handlers should be bundled completely differently for some reason)

karlhorky · 2023-02-28T06:24:35Z

I noticed that in the serverComponentsExternalPackages docs section there is a list of packages that are opted out automatically:

Next.js includes a short list of popular packages that currently are working on compatibility and automatically opt-ed out:

@prisma/client

@sentry/nextjs

@sentry/node

autoprefixer

aws-crt

cypress
...

Maybe bcrypt should also be added to this list?

timneutkens · 2023-02-28T08:18:18Z

Yeah feel free to add bcrypt 👍

JesseKoldewijn · 2023-02-28T08:30:40Z

Yeah feel free to add bcrypt 👍

omw 😉

JesseKoldewijn · 2023-02-28T08:48:39Z

just added bcrypt to the list, only gotta do a test-run and such then I'll push it into a PR 👍

…#46532) fixes #46493 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

karlhorky · 2023-02-28T11:02:13Z

Thanks for the PR, review and merge @JesseKoldewijn and @timneutkens !

Looking forward to seeing this in v13.2.2-canary.4 and v13.2.2 when these versions are out!

karlhorky · 2023-03-01T14:35:32Z

Confirmed that versions starting at v13.2.2-canary.4 work without any configuration, thanks! 🙌

CodeSandbox: https://codesandbox.io/p/sandbox/gifted-bhaskara-w37l3k?file=%2Fnext.config.js

this fixes the same as #46493 but for [argon2](https://www.npmjs.com/package/argon2)  ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

github-actions · 2023-04-01T00:03:48Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

karlhorky added the bug Issue was opened via the bug report template. label Feb 27, 2023

karlhorky mentioned this issue Feb 27, 2023

Webpack loaders not found when building with next@13.2.1 #46374

Closed

1 task

karlhorky mentioned this issue Feb 27, 2023

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

Closed

balazsorban44 added Webpack Related to Webpack with Next.js. Navigation Related to Next.js linking (e.g., <Link>) and navigation. area: app App directory (appDir: true) labels Feb 28, 2023

JesseKoldewijn mentioned this issue Feb 28, 2023

Added bcrypt to the serverComponentsExternalPackages auto-optOut list #46532

Merged

11 tasks

kodiakhq bot closed this as completed in #46532 Feb 28, 2023

fedeya mentioned this issue Mar 4, 2023

add argon2 to serverComponentsExternalPackages auto-optOut list #46779

Merged

11 tasks

karlhorky mentioned this issue Mar 7, 2023

Using dompurify with SSR or Server Component fails with webpack error #46893

Closed

1 task

github-actions bot locked as resolved and limited conversation to collaborators Apr 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Route Handlers Crash with bcrypt #46493

Route Handlers Crash with bcrypt #46493

karlhorky commented Feb 27, 2023 •

edited

Josehower commented Feb 27, 2023

karlhorky commented Feb 27, 2023

karlhorky commented Feb 27, 2023 •

edited

JesseKoldewijn commented Feb 27, 2023

balazsorban44 commented Feb 28, 2023 •

edited

karlhorky commented Feb 28, 2023 •

edited

karlhorky commented Feb 28, 2023 •

edited

timneutkens commented Feb 28, 2023

JesseKoldewijn commented Feb 28, 2023

JesseKoldewijn commented Feb 28, 2023

karlhorky commented Feb 28, 2023

karlhorky commented Mar 1, 2023 •

edited

github-actions bot commented Apr 1, 2023

Route Handlers Crash with bcrypt #46493

Route Handlers Crash with bcrypt #46493

Comments

karlhorky commented Feb 27, 2023 • edited

Verify canary release

Provide environment information

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

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Josehower commented Feb 27, 2023

karlhorky commented Feb 27, 2023

karlhorky commented Feb 27, 2023 • edited

Workaround

JesseKoldewijn commented Feb 27, 2023

balazsorban44 commented Feb 28, 2023 • edited

karlhorky commented Feb 28, 2023 • edited

Workaround

karlhorky commented Feb 28, 2023 • edited

timneutkens commented Feb 28, 2023

JesseKoldewijn commented Feb 28, 2023

JesseKoldewijn commented Feb 28, 2023

karlhorky commented Feb 28, 2023

karlhorky commented Mar 1, 2023 • edited

github-actions bot commented Apr 1, 2023

karlhorky commented Feb 27, 2023 •

edited

karlhorky commented Feb 27, 2023 •

edited

balazsorban44 commented Feb 28, 2023 •

edited

karlhorky commented Feb 28, 2023 •

edited

karlhorky commented Feb 28, 2023 •

edited

karlhorky commented Mar 1, 2023 •

edited