I am attempting to integrate argon2-browser into my Ionic-Angular project. Upon syncing with
ionic cap sync
I encounter the following 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'
This section contains 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 here is a snippet from 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",
}
My troubleshooting attempts so far include:
Installing the missing modules
Adding the following configuration to my package.json:
"browser":{
"path": false,
"fs": false,
"a": false
},
This stopped the error during syncing, but when running the code on my Android device, I encountered the following error:
Msg: WebAssembly.instantiate(): Import #0 module="a" function="a" error: function import requires a callable undefined
What could be the issue here?
Your assistance is much appreciated :)