爲什麼使用帶有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導入具有命名導出的默認導出會導致錯誤？

回答

相關問題