@node-rs/argon2: Module parse failed: Unexpected character '�'

[AleksaSimovic1]

The Problem

After installing this package using pnpm add @node-rs/argon2 my dev server crashes immediately with the following error:

Module parse failed: Unexpected character '�' (1:2)
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
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/.pnpm/@node-rs+argon2-win32-x64-msvc@1.8.3/node_modules/@node-rs/argon2-win32-x64-msvc/argon2.win32-x64-msvc.node
./node_modules/.pnpm/@node-rs+argon2@1.8.3/node_modules/@node-rs/argon2/index.js
./src/lib/auth/index.ts
./src/actions/login.ts

The character in question is: "U+FFFD".

I am using a Next.js 14 with server actions, where I use @node-rs/argon2 for hashing and verifying passwords on the server.

There is only two functions where I use @node-rs/argon2:

import { hash, verify } from "@node-rs/argon2"

export async function hashPassword(password: string) {
  const hashedPassword = await hash(password, {
    memoryCost: 19456,
    parallelism: 1,
    timeCost: 2,
  })
  return hashedPassword
}

export async function verifyPassword(password: string, hashedPassword: string) {
  const isValid = await verify(hashedPassword, password)
  return isValid
}

Node Version

This might be the problem since it is not listed in the support matrix.

v20.12.0

Operating System

Windows 10 x64

[Sheharyar566]

Temporary fix:
Try adding this block to next.config file:

	experimental: {
		serverComponentsExternalPackages: ["@node-rs/argon2"]
	}

For some reason, it seems like this package doesn't work with Turbopack.
Source: https://lucia-auth.com/tutorials/username-and-password/nextjs-app

[dBianchii]

Also having this. I added

experimental: {
		serverComponentsExternalPackages: ["@node-rs/argon2"]
	}

But it didn't work

[Sheharyar566]

Temporary fix: Try adding this block to next.config file:

	experimental: {
		serverComponentsExternalPackages: ["@node-rs/argon2"]
	}

For some reason, it seems like this package doesn't work with Turbopack. Source: https://lucia-auth.com/tutorials/username-and-password/nextjs-app

This fixed my issue but is it recommended on production?

Well, it does say "experimental" 😁 so may be not 🤷‍♂️