Handle Webpack 5's Polyfill issues in Ionic Vue

Question

I am trying to use cosmjs' packages in Ionic Vue. When I would like to import

import { DirectSecp256k1HdWallet } from "@cosmjs/proto-signing";

I received this problem:

If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

and unable to use the application in the app.

Answer 1

According to Ionic and Vue docs you can easily merge a custom object into the final webpack config.

First of all, install the browser version of your crypto module by executing:

npm install crypto-browserify

Then you should create a vue.config.js file in your project root like this:

// vue.config.js

module.exports = {
    configureWebpack: {
        resolve: {
            fallback: {
                crypto: require.resolve( 'crypto-browserify' )
                // Any other missed node module
            }
        }
    }
};

You should be able to repeat this process for every missed node native module that has a browser version.