Error: Modules not found when using argon2-browser in Ionic-Angular application

Question

I want to use argon2-browser in my Ionic-Angular project. As soon as i sync with

ionic cap sync

i get these errors:

./node_modules/argon2-browser/dist/argon2.js:35:22-45 - Error: Module not found: Error: Can't resolve 'path' in 'C:\Users\SomeUser\WebstormProjects\foo\project\node_modules\argon2-browser\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/argon2-browser/dist/argon2.js:40:26-39 - Error: Module not found: Error: Can't resolve 'fs' in 'C:\Users\SomeUser\WebstormProjects\foo\project\node_modules\argon2-browser\dist'

./node_modules/argon2-browser/dist/argon2.wasm - Error: Module not found: Error: Can't resolve 'a' in 'C:\Users\SomeUser\WebstormProjects\foo\project\\node_modules\argon2-browser\dist'

here is the relevant code:

async generateHash() {
    const hash = await argon2.hash({pass: "testPassword", salt: "testSalt", type: 0})
      .then(h => console.log(h.hash, h.hashHex, h.encoded))
      .catch(e => console.error(e.message, e.code));
  }

and a snipped of my package.json:

"dependencies": {
...
 "@angular/cdk": "^15.2.9",
 "@angular/common": "^15.0.0",
 "@angular/core": "^15.0.0",
 "@angular/forms": "^15.0.0",
 "@angular/platform-browser": "^15.0.0",
 "@angular/platform-browser-dynamic": "^15.0.0",
 "@types/argon2-browser": "^1.18.1",
...
},
"devDependencies": {
 "@angular/cli": "^15.0.0",
 "@angular/compiler": "^15.0.0",
 "@angular/compiler-cli": "^15.0.0",
 "@angular/language-service": "^15.0.0",
 "@capacitor/cli": "^4.7.0",
 "@ionic/angular-toolkit": "^8.0.0",
 "@ionic/cli": "^6.20.9",
 "argon2-browser": "^1.18.0",
}

What i tried:

installed the modules which were not found
adding the following to my package.json:

 "browser":{
    "path": false,
    "fs": false,
    "a": false
  },

this results into not getting an error when i sync my project. But when i run the code on my android device i get the following error:

Msg: WebAssembly.instantiate(): Import #0 module="a" function="a" error: function import requires a callable undefined

What have i done wrong?

Thanks for the help in advance :)

Error: Modules not found when using argon2-browser in Ionic-Angular application

0 Answers0