Question

我正在使用Webpack捆绑我的文件。我想为我的用户提供FB登录。我已经创建了我的FB应用程序并且已经包含在我的HTML中：

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'xxxxxx',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.10'
        });
        FB.AppEvents.logPageView();
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>

我也有一个div：

<div class="fb-login-button btn-fb"
 data-max-rows="1"
 data-size="large"
 data-button-type="continue_with"
 data-show-faces="false"
 data-auto-logout-link="false"
 data-use-continue-as="false"
 scope="public_profile, email"
 onlogin="checkLoginState()">
</div>

当我部署时，我可以看到FB对话框，但它会出错：

"sdk.js:110 Uncaught ReferenceError: checkLoginState is not defined"

函数checkLoginState在我的login.js文件中定义，该文件是webpack中的入口点。

我的猜测是checkLoginState需要暴露给全局范围来修复此错误。所以我试过

window.checkLoginState = function() {
...
}

然而它没有用。

根据我的测试，我发现只有当我在checkLoginState函数中添加另一个JS调用时才会出现这种情况，即：

window.checkLoginState = function () { 
  console.log("checkLoginState >>>"); 
  socialAuth.checkFBLoginStatus(); 
};

如果我删除socialAuth.checkFBLoginStatus()来电，则会找到checkLoginState。

我正在寻找帮助让我超越此错误。

Answer 1

我能让它工作的唯一方法是将函数放在同一个JS文件中，而不是将它们保存在单独的文件中。

我的socialAuth JS文件也在另一个JS文件中调用函数。我在socialAuth中删除了所有这些功能，然后就可以了。

Webpack Facebook登录按钮错误

1 个答案: