amplify-js: Getting "Uncaught TypeError: Cannot read property 'crypto' of undefined" after setting up webpack configuration in react app

AWS SDK throws

    Uncaught TypeError: Cannot read property 'crypto' of undefined
        at eval (rng.js:23)
        at eval (rng.js:32)
        at Object../node_modules/crypto-browserify/rng.js (main.js:13413)
        at __webpack_require__ (main.js:20)
        at eval (index.js:6)
        at Object../node_modules/crypto-browserify/index.js (main.js:13389)
        at __webpack_require__ (main.js:20)
        at eval (AuthenticationHelper.js:9)
        at Object../node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (main.js:238)
        at __webpack_require__ (main.js:20)

I am using aws-amplify as a dependency in my react app

Looking at existing similar issues, I found that problem is getting resolved by adding “node_module” folder in exclude list for babel loader, but this is not working in my case.

Here is the webpack config file.

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: "html-loader",
                            options: {minimize: true}
                        }
                    ]
                },
                {
                    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }]
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, "css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css"
            })
        ]
    };