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

Created on 23 May 2018  路  14Comments  路  Source: aws-amplify/amplify-js

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"
            })
        ]
    };
investigating

Most helpful comment

the thing is it's really just one liner fix-can't you fork crypto-browserify package and publish it scoped to @aws/crypto-browserify as version 1.0.10 and change the dependency to that one? Currently aws-amplify is not usable in webpack with default settings.

This whole procedure takes like 5 minutes, maybe 10 if a developer sips coffee half the time.

All 14 comments

@stranger9811 which version of aws-amplify and amazon-cognito-identity-js are you using?

Hi Team,

Any updates on this?

@stranger9811 seems as though you may be using an older version linked to the cognito sdk...the crypto lib is a dependency of the amazon-cognito-identity-js, which had some issues back around v2.0.2/3...also, if you are not using the sdk directly, you don't need to include as a dep in your app since amplify will handle that...so if you npm install --save aws-amplify, you should get the latest and not have thiis error. The latest right now would be 0.4.3, can you trying deleting your node_modules and clearing npm cache / reinstalling?

I'm seeing this as well.

    "amazon-cognito-identity-js": "^2.0.9",
    "aws-amplify": "^0.4.4",
    "aws-sdk": "^2.251.1"`

Code running on page load thats causing issue AFAIK

    const userPool = new CognitoUserPool({
      UserPoolId: config.UserPoolId,
      ClientId: config.ClientId,
      Paranoia: 7
    })
    Config.region = config.Region

@mlabieniec Still getting the same problem.

I have the same problem with [email protected] and [email protected], I resolved it the same as https://github.com/aws/aws-amplify/issues/888#issue-325561839.

Why are you using
so old version of [email protected] anyway @mlabieniec ? This version is like 2-3 years old.

@capaj We tried to update that package but it would break the library because the crypto is aimed to be running in NodeJS and when it came into the browser side, it will bring some unexpected behaviors when working with other packages. We would prefer to replace it with another crypto library but I can't tell when will it get implemented.

the thing is it's really just one liner fix-can't you fork crypto-browserify package and publish it scoped to @aws/crypto-browserify as version 1.0.10 and change the dependency to that one? Currently aws-amplify is not usable in webpack with default settings.

This whole procedure takes like 5 minutes, maybe 10 if a developer sips coffee half the time.

Ran into this issue using AWS Amplify 1.0.5 with a webpack configuration.

Locally patched rng.js as suggested above.

Any progress on this?

Same issue,
"amazon-cognito-identity-js": "^2.0.20",

@mlabieniec do you have any ideas how to make a workaround of this issue? Our staging environment doesn't work, people are literally waiting until it gets resolved.

Just ran into this issue today and my pages can't seem to load, which is very strange

More information on how to fix this here: https://github.com/aws/aws-sdk-js/issues/1566

Was this page helpful?
0 / 5 - 0 ratings