CODEWITHSUNDEEP
javascriptwebpackbabeljs
Robert
Robert

Reputation: 991

Why does importing a default export with a named export cause an error when using webpack with babel?

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!

Upvotes: 0

Views: 889

Answers (1)

Jason Xu
Jason Xu

Reputation: 885

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

Upvotes: 1

Related Questions