Webpack Facebook Login Button error

Question

I am using Webpack to bundle my files. I want to provide FB login to my users. I have created my FB app and have included in my HTML like this:

<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>

I also have a 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>

When I deploy, I can see FB dialog however it gives an error :

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

The function checkLoginState is defined in my login.js file which is an entry point in webpack.

My guess is checkLoginState needs to be exposed to global scope to fix this error. So I tried

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

However it did not work.

Based on my testing I am seeing this behavior occurs only when I add another JS call in the checkLoginState function i.e :

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

If I remove the socialAuth.checkFBLoginStatus() call, then checkLoginState is found.

I am looking for help to get me past this error.

Answer 1

The only way I could get it to work was to bring the functions in the same JS file instead of keeping them in separate files.

My socialAuth JS file was calling functions in another JS files also. I pulled all of those functions in socialAuth and then it worked.