Blitz: secure_password__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor

[krszwsk]

What is the problem?

There's an issue causing a blank screen when navigating to a home page of a new blitz app:

Error was not caught TypeError:
secure_password__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor
    at Module.eval (auth-utils.ts?cc77:5)
    at eval (auth-utils.ts?cc77:20)
    at Module../app/auth/auth-utils.ts (_app.js?ts=1606505135395:9634)
    at __webpack_require__ (webpack.js?ts=1606505135395:873)
    at fn (webpack.js?ts=1606505135395:151)
    at Module.eval (login.ts:6)
    at eval (login.ts:107)
    at Module../app/_resolvers/auth/mutations/login.ts (_app.js?ts=1606505135395:9622)
    at __webpack_require__ (webpack.js?ts=1606505135395:873)
    at fn (webpack.js?ts=1606505135395:151)
    at Module.eval (login.client.ts?73cf:2)
    at eval (login.client.ts?73cf:4)
    at Module../app/auth/mutations/login.client.ts (_app.js?ts=1606505135395:9658)
    at __webpack_require__ (webpack.js?ts=1606505135395:873)
    at fn (webpack.js?ts=1606505135395:151)
    at Module.eval (LoginForm.tsx:14)
    at eval (LoginForm.tsx?a6f7:50)
    at Module../app/auth/components/LoginForm.tsx (_app.js?ts=1606505135395:9646)
    at __webpack_require__ (webpack.js?ts=1606505135395:873)
    at fn (webpack.js?ts=1606505135395:151)
    at Module.eval (_app.tsx:11)
    at eval (_app.tsx:165)
    at Module../pages/_app.tsx (_app.js?ts=1606505135395:9717)
    at __webpack_require__ (webpack.js?ts=1606505135395:873)
    at fn (webpack.js?ts=1606505135395:151)
    at eval (next-client-pages-loader.js?7169:5)
    at eval (route-loader.ts?8a46:274)

Steps to Reproduce

1. blitz new exampleApp
2. cd exampleApp
3. blitz start

Versions

debug: blitzPkgPath: <redacted>/exampleApp/node_modules/blitz/dist/index.js
debug: cliPkgPath: <redacted>/exampleApp/node_modules/@blitzjs/cli/lib/src/index.js

macOS Big Sur | darwin-x64 | Node: v14.10.1

blitz: 0.26.1 (global)
blitz: 0.26.1 (local)

  Package manager: yarn
  System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.12 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.10.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    @prisma/cli: 2.12.1 => 2.12.1
    @prisma/client: 2.12.1 => 2.12.1
    blitz: 0.26.1 => 0.26.1
    react: 0.0.0-experimental-4ead6b530 => 0.0.0-experimental-4ead6b530
    react-dom: 0.0.0-experimental-4ead6b530 => 0.0.0-experimental-4ead6b530
    typescript: 4.1.2 => 4.1.2

[krszwsk]

Rolled back to 0.25.0 and to 0.26.0, issue still persists.

[Daidalos117]

Tried to rollback to 0.25.0 and the issue was actually gone.

[johnharringt0n]

I had the same issue in #1546, confirmed that rolling back global + local installs of blitz to 0.25.0 seems to be working for me.

[flybayer]

@johnharringt0n @krszwsk can you try making the changes in your app/auth/auth-utils.ts as shown here: https://github.com/blitz-js/blitz/pull/1549/files#diff-0ecc0526f1f27e4da88e4b4de4fcf4453a8406d2287f25f127753d5f18f7c184 ?

Then let me know if that fixes it.

[johnharringt0n]

@flybayer Re-installed [email protected] locally + globally and now working after making those changes to auth-utils.ts. Thanks!

[flybayer]

Solution

Make the following change to app/auth/auth-utils.ts

import SecurePassword from "secure-password"
import db from "db"

-const SP = new SecurePassword()
+const SP = () => new SecurePassword()

export const hashPassword = async (password: string) => {
-  const hashedBuffer = await SP.hash(Buffer.from(password))
+  const hashedBuffer = await SP().hash(Buffer.from(password))
  return hashedBuffer.toString("base64")
}
export const verifyPassword = async (hashedPassword: string, password: string) => {
  try {
-   return await SP.verify(Buffer.from(password), Buffer.from(hashedPassword, "base64"))
+   return await SP().verify(Buffer.from(password), Buffer.from(hashedPassword, "base64"))
  } catch (error) {
    console.error(error)
    return false