为什么使用带有babel的webpack导入具有命名导出的默认导出会导致错误？

我有2个构造函数，SignUp和GoogleSignIn。在结构上，他们是这样的：为什么使用带有babel的webpack导入具有命名导出的默认导出会导致错误？

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;

和

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;

我一直在使用的WebPack与巴贝尔装载机捆绑这些和其他资产一起，但是当我打开我的网页出现错误：

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

基本上，SignUp的值是未定义的。我是否错误地导入或导出值？

具体地，失败的线是这一个：

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

我可以在必要时提供额外的细节。非常感谢你！

来源

2016-11-10 Robert

您是否有循环依赖？ –

这可能是因为您使用的是Babel 6，它根据ES6规范编译模块。如果是这种情况，有两种解决方法：

1.更改GoogleSignIn.prototype = Object.create(SignUp.prototype); 到GoogleSignIn.prototype = Object.create(SignUp.default.prototype);

2.使用这个插件（https://www.npmjs.com/package/babel-plugin-add-module-exports），感受一下老出口行为回来。

您可以参考Babel 6 changes how it exports default

来源

2016-11-10 02:17:59

我想你可能是正确的，因为实际的webpack输出显示Object.create（SignUp.default.prototype）。今晚下班后我会试试这个，然后和你一起回去。 – Robert

如果ES6模块通过CommonJS导入，你所指的只是一个问题。但是OP使用ES6导入（从“./SignUp”;'）导入SignUp，{gapi_promise}，所以这应该不成问题。 SignUp变量应该引用这个类。 –

这是正确的@FelixKling。因此，为了解决您的原始评论，我的注册表单上有一个按钮，需要用户登录，反之亦然，因此我目前已将登录导入SignUp和SignUp登录。看起来这是一个循环依赖，但我想我不完全确定如何避免这种情况。你有什么建议？ – Robert

为什么使用带有babel的webpack导入具有命名导出的默认导出会导致错误？

回答

相关问题