FROM CACHE - en_header

Embedded SDK not working on Firefox

Jose_Samper
Shopify Partner
30 2 18

Hello,

 

We've just noticed that the Embedded SDK has stopped working on Firefox.

 

The simple initialization code described at https://help.shopify.com/en/api/embedded-apps/embedded-app-sdk/initialization#set-up-the-shopify-tit... throws the error

      TypeError: document.body is null

on the call to ShopifyApp.Bar.initialize(...).

 

We have tested the issue on Firefox 69 and Firefox 70 on Linux and Windows. The same code works with no errors with Chrome or Safari and used to work on Firefox.

 

Could you confirm if this is an error on a recent Embedded SDK update?

 

Regards,

  Jose

 

Replies 4 (4)
SBD_
Shopify Staff
Shopify Staff
1098 146 221

Hey Jose,

 

Which app are you noticing this issue on?

Scott | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Jose_Samper
Shopify Partner
30 2 18

Hi @SBD_ 

 

sorry for not getting back to you before but finding a reproducible test case has been quite tricky.

 

The following code will trigger the error:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test page</title>
    <meta charset="UTF-8"/>
    <script src="//cdn.shopify.com/s/assets/external/app.js"></script>
    <script>
        ShopifyApp.init({
            apiKey: "XXXXXXXXXXX",
            shopOrigin: "YYYYYYYYYYY"
        });
        ShopifyApp.ready(function() {
            var params = {
                title: 'My Title'
            };
            ShopifyApp.Bar.initialize(params);
        });
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
</head>
<body>
    <h1>This is a test page</h1>
</body>
</html>

Of course, apiKey and shopOrigin must be replaced by real values.

 

If you need to see it in action (but the code is exactly the same), you can install our app Also Bought from https://apps.shopify.com/also-bought and, in the app preferences page, replace in the URL preferences.html by test.html

 

The key part are the two lines after the Embedded SDK initialization:

 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>

 

If we remove any of them, or put them before the Embedded SDK initialization, everything works OK.

Don't bother about the href and src values, any CSS or Javascript file triggers the error.

 

Hope that helps to report the issue to the appropriate team. Thanks in advance.

 

Regards,

  Jose

 

 

 

SBD_
Shopify Staff
Shopify Staff
1098 146 221

Thanks @Jose_Samper. This appears to be caused by calling init before the body has loaded. Wrapping the init code in an 'on load', or moving it further down the document should resolve the issue. Alternatively, consider using the new app bridge.

Scott | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Jose_Samper
Shopify Partner
30 2 18

Hi,

 

Thanks for your response.

 

Yes, we know that we can prevent the issue by changing our way of calling the SDK initialization and, indeed, we did that once we detected the problem.

 

I was just reporting it to you in case you wanted to take a look at it, as the Embedded SDK did not work this way before and because it works differently on Firefox than on Safari or Chrome.

 

Thanks again. Regards,

  Jose