Webpack Facebook 登录按钮错误

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 登录按钮错误

Webpack Facebook Login Button error

facebook-javascript-sdk

facebook-login

webpack-2