Handling Webpack 5 Polyfill issues in Ionic Vue

Question

I'm trying to use the cosmjs package with Ionic Vue. When I want to import

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

I got this question:

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

And the application cannot be used within the application.

Answer 1

According to the Ionic and Vue documentation you can easily incorporate custom objects into the final webpack configuration.

First, install the browser version of the encryption module by executing the following command:

npm install crypto-browserify

You should then create a vue.config.js file in your project root directory 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 each missed node-native module that has a browser version.