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 :)

Answer 1

Below changes resolved the issue for me.

You need to create custom webpack config https://www.npmjs.com/package/@angular-builders/custom-webpack

  "dependencies": {
    ...
    "argon2-browser": "^1.18.0",
    "base64-loader": "^1.0.0",
    "path-browserify": "^1.0.1",
    "ts-loader": "^9.4.4",
    ...
  },
  "devDependencies": {
    ...
    "@types/argon2-browser": "^1.18.1",
    ...
  }

extra-webpack.config.js

module.exports = {
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.js', '.ts'],
        fallback: {
            path: require.resolve("path-browserify"),
            fs: false,
            a: false
        }
    },
    mode: 'production',
    experiments: {
        asyncWebAssembly: true,
        syncWebAssembly: true
    },
    module: {
        rules: [
            {
                test: /\.wasm$/,
                loader: "base64-loader",
                type: 'javascript/auto'
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: 'ts-loader'
            }
        ]
    }
}