Aws-sdk-js: error: Uncaught TypeError: Cannot read property 'crypto' of undefined in browser, when using webpack

[SanderElias]

This issue was raised already in #1512 first. Using the solution in there did not resolve it for me.

There is an ancient version of crypto-browserify (1.0.9) included in aws. This broke my build.
I tried to update that dependency to the latest version, but that broke aws-sdk completely.

the culprit is line 4 in rng.ks (sorry, can't put a link here, seems not to be available on git anymore)

  var _global = this;

In strict mode the this will be undefined.
When replaced by:

  var _global = this || window || {};

it will not error out anymore, but changing files in node_modules isn't very stable. (slight understatement there!)

[chrisradek]

@SanderElias
Are you using webpack v1 or v2?

[SanderElias]

Sorry, I should have included that.
I'm using V2.4.0

I really think it's not a webpack issue. I debugged this, and it happens because this resource gets pulled in in strict mode. The same issue will start occurring once ES2015's modules become more prevalent. The code will fail in strict mode because this is undefined instead of being the windows object.

[chrisradek]

@SanderElias

I tested a sample app where I switched all my commonjs imports of the SDK to use ES2015 import syntax. Webpack indeed added "use strict"; to the modules I imported the SDK from. However, it did not add "use strict"; to any modules the SDK depends on.

Can you share what your webpack config looks like? I do see this issue occur if I manually add "use strict"; to the top level function in the webpack-generated bundle, but haven't been able to see the same issue otherwise.

[SanderElias]

@chrisradek found a/the solution.
Took another look at my webpack config, as you could not reproduce, and decided to try to rename the '/node_modules/' to '${__dirname}/node_modules/'.

That did the trick. Somehow that triggered something in webpack.
On the other hand, a config like this is not that uncommon:

var webpack = require('webpack');

module.exports = {
    entry: {
        'main':    `${__dirname}/app/main.js`,
    },

    devtool: "source-map",

    output: {
        path:     `${__dirname}/dist`,
        filename: "[name].bundle.js"
    },

    module: {
        loaders: [
            {
                test:    /\.js$/,
                use:     [
                    {
                        loader: 'babel-loader',
                        query:  {
                            presets: ['es2015'],
                        }
                    },
                ]
            },
        ]
    }
};

Should not cause this issue in my opinion.

[felschr]

I'm having the same issue when building an Ionic 3 app with the production flag on the default webpack configuration.

[felschr]

This issue is still present in the latest version 2.109.0 on npm.

[dannjoku1]

I'm experiencing the same issue while building a react.js app. Any update on a solution/fix?

[matrunchyk]

When are going to solve it?

[matrunchyk]

@SanderElias why Closed?

[chrisradek]

@matrunchyk
The JS SDK no longer uses crypto-browserify in browser/react-native environments, which is where this problem was happening. What issue are you seeing, and are you using the latest version of the SDK?

[matrunchyk]

@chrisradek this is what we use:

"amazon-cognito-identity-js": "^2.0.20",
"aws-sdk": "^2.292.0",

Should we use both or aws-sdk only? We don't use React (we use Vue), and we don't use MobileHub.

[andersforsell]

I am still seeing this issue:

rng.js:21 Uncaught TypeError: Cannot read property 'crypto' of undefined
    at rng.js:21
    at Object.<anonymous> (rng.js:31)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/rng.js (rng.js:31)
    at __webpack_require__ (bootstrap:63)
    at Object.<anonymous> (index.js:4)
    at Object.<anonymous> (index.js:97)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/index.js (index.js:97)
    at __webpack_require__ (bootstrap:63)
    at Object../node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (AuthenticationDetails.js:84)
    at __webpack_require__ (bootstrap:63)

My dependencies in package.json:

"dependencies": {
    "ajv-keywords": "^3.2.0",
    "apollo-client": "^2.3.8",
    "aws-amplify": "^1.0.8",
    "aws-appsync": "^1.3.4",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "regenerator-runtime": "^0.11.1",
    "uuid": "^3.1.0"
  },

In package-lock.json there is a dependency to crypto-browserify:

    "amazon-cognito-identity-js": {
      "version": "2.0.23",
      "resolved": "https://registry.npmjs.org/amazon-cognito-identity-js/-/amazon-cognito-identity-js-2.0.23.tgz",
      "integrity": "sha512-TRZEphGFIPgrMNuFlAzr7ZhZfqkEMDNFXD5OI9ZL/iw+D3e2xHw0FHyaN3fWW06ZRiBvJUHAXPnOV0ON40e/ng==",
      "requires": {
        "buffer": "4.9.1",
        "crypto-browserify": "1.0.9",
        "js-cookie": "2.2.0"
      }
    },

*POSSIBLE WORKAROUND: UPDATE Does not work anymore? *
Manually install a newer amazon-cognito-identity:
npm install amazon-cognito-identity-js --save

[tlaskowski]

Hello, I've upgraded my Angular application from 7 to 8.2.7 after that I have console error "Uncaught TypeError: Cannot read property 'crypto' of undefined".

I'm using aws-sdk 2.535.0.

Does anyone the same problem?

[trivikr]

@tlaskowski Please create a new issue for related bugs and link to relevant comments in this thread.

I'm locking this thread, as it's old and resolved.