Module parse failed: Unexpected character '�' (1:2) You may need an appropriate loader to handle this file type

[urbno]

Hi All,

Steps to reproduce

1. Create new typescript based project with Next.js
2. Install the required package npm i argon2
3. npm run dev

Expected behaviour

I just would like to try this library in my project.

Actual behaviour

I would like to familiarize myself with this library, but I got an error during compiling.

error - ./node_modules/argon2/lib/binding/napi-v3/argon2.node
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)
Could not find files for / in .next/build-manifest.json

Environment

Operating system:
Windows 10 64bit

Node version:

node -v     
v18.12.1

npm -v
9.1.2

Could you please suggest me any solution?

Thanks in advance,
Norbert

[ranisalt]

You can not use Argon2 on the client-side, that means you can not use it in React components (i.e. Next.js pages). You should be able to use it in server-side functions, such as getServerSideProps or getStaticProps.

[Voltra]

Related issue in nuxt-session

I can understand Argon2 not being able to be used on the client-side, however the error occurs during build phases (i.e. when using webpack, rollup, vite, etc...).

I assume the issue is related to the import of the .node file

[Voltra]

bcrypt seems to be using @mapbox/node-pre-gyp and users switching to bcrypt have reported it fixes their build issues.

Maybe migrating to using that would be a good way to bridge the gap between argon2 and build tools

[ranisalt]

@Voltra we already use that. For usage in webpack, check #261 (others should follow suit)