0

I have 2 constructors, SignUp and GoogleSignIn. Structurally, they look like this:

import SignUp, {gapi_promise} from "./SignUp";
/**
*
* @param element
* @extends SignUp
* @constructor
*/
function GoogleSignIn(element){

    SignUp.call(this);
}

GoogleSignIn.prototype = Object.create(SignUp.prototype);

export default GoogleSignIn;

and

function SignUp(){
    //Some constructor code
}

export let gapi_promise = (function(){

    return new Promise((resolve, reject) => {
        //Do some promise stuff with the google api
    });
}());

export default SignUp;

I've been using webpack with the babel loader to bundle these and other assets together, but when I load my page I get the error:

GoogleSignIn.js?1051**:21 Uncaught TypeError: Cannot read property 'prototype' of undefined(…)

Basically, the value of SignUp is undefined. Am I importing or exporting values incorrectly?

Specifically, the line that fails is this one:

GoogleSignIn.prototype = Object.create(SignUp.prototype);

I can provide additional details if necessary. Thank you very much!

d4nyll
  • 11,811
  • 6
  • 54
  • 68
Robert
  • 981
  • 1
  • 15
  • 24

1 Answers1

1

It maybe because you are using Babel 6, which compiles modules according to ES6 specifications. If it is this case, you have two solutions:

1.Change GoogleSignIn.prototype = Object.create(SignUp.prototype); to GoogleSignIn.prototype = Object.create(SignUp.default.prototype);

2.Use this plugin(https://www.npmjs.com/package/babel-plugin-add-module-exports) to get the old export behavior back.

You can refer to Babel 6 changes how it exports default

Community
  • 1
  • 1
Jason Xu
  • 845
  • 8
  • 22
  • I think you may be correct, because the actual webpack output shows Object.create(SignUp.default.prototype). I'm going to try this out after work tonight and get back with you. – Robert Nov 10 '16 at 14:48
  • 1
    What you are alluding to is only a problem if an ES6 module is imported via CommonJS. But the OP is using ES6 imports (`import SignUp, {gapi_promise} from "./SignUp";`), so that shouldn't be a problem. The `SignUp` variable should refer to the class. – Felix Kling Nov 10 '16 at 17:53
  • That's correct @FelixKling. So to address your original comment, I have a button on my sign up form that takes a user to login and vice versa, therefore I've currently imported Login into SignUp and SignUp into Login. Looks like that is a cyclic dependency, but I guess I'm not entirely sure how to avoid that. What is your advice? – Robert Nov 11 '16 at 22:15