Cannot read property 'crypto' of undefined

[reggie3]

I'm getting the following error:
aws-cognito-sdk.js:13473 Uncaught TypeError: Cannot read property 'crypto' of undefined

I'm using webpack, and have installed the sjcl module via npm: https://www.npmjs.com/package/sjcl

Is this issue related to my sjcl installation?

[itrestian]

Sjcl uses window.crypto for random number generation in certain cases. Are you running in a browser or a node environment? In node, window is undefined.

[akirasosa]

@reggie3 I have got same problem when I use babel and webpack. In my case, I had a mistake to forget exclude: /node_modules/ for babel-loader.

Here is my example for sign up app using babel and webpack.

// webpack.config.babel.js
export default {
  resolve: {
    extensions: ['', '.js', 'jsx'],
  },
  devtool: "cheap-eval-source-map",
  entry: ['./src/main.jsx'],
  output: {
    path: 'dist',
    filename: 'main.bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,  // <------ I have forgot it and got "Cannot read property 'crypto' of undefined"
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.json$/,
        loader: 'json'
      }
    ]
  }
};

// src/main.jsx
import {Config, CognitoIdentityCredentials} from "aws-sdk";
import {
  CognitoUserPool,
  CognitoUserAttribute,
  CognitoUser
} from "amazon-cognito-identity-js";
import React from "react";
import ReactDOM from "react-dom";

Config.region = 'your region';
Config.credentials = new CognitoIdentityCredentials({
  IdentityPoolId: 'your pool id',
});

const userPool = new CognitoUserPool({
  UserPoolId: 'your user pool id',
  ClientId: 'your client id',
});

class SignupForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  handleEmailChange(e) {
    this.setState({email: e.target.value});
  }

  handlePasswordChange(e) {
    this.setState({password: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    const email = this.state.email.trim();
    const password = this.state.password.trim();
    const attributeList = [
      new CognitoUserAttribute({
        Name: 'email',
        Value: email,
      })
    ];
    userPool.signUp(email, password, attributeList, null, (err, result) => {
      if (err) {
        console.log(err);
        return;
      }
      console.log('user name is ' + result.user.getUsername());
      console.log('call result: ' + result);
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input type="text"
               value={this.state.email}
               placeholder="Email"
               onChange={this.handleEmailChange.bind(this)}/>
        <input type="password"
               value={this.state.password}
               placeholder="Password"
               onChange={this.handlePasswordChange.bind(this)}/>
        <input type="submit"/>
      </form>
    );
  }
}

ReactDOM.render(<SignupForm />, document.getElementById('app'));

@itrestian
I think that it's better for us to have complete examples which are ready to work in this repository. Can I send a pull request for it? I will create an example directory and put my example in it.

[itrestian]

Thanks @akirasosa. That sounds like a good idea - a folder with working examples for various setups. Send a pull request and we will look at it within the team.

[itrestian]

Merged the example. Closing this. If the issue still exists, feel free to reopen.