"Failed To Render App Block" Issue With App Extension

s5-jordan
Shopify Partner
10 0 8

Hello,

 

I am currently working on getting my application approved, however during the approval process I was sent a screencast showing that the app extension is not loading on the store.

 

When I logged onto the store in question and checked to see if I could replicate the issue, I'm seeing a comment in the HTML where the app block is supposed to render that says, "Failed to render app block "b47eb8c8-e7c4-4304-a937-39e690774c89": app block path "shopify://apps/my-app-name/blocks/my-block-name/da3e1b2c-1041-4679-9e32-2cddc3f298e5" does not exist". Nothing else is loaded except for that HTML comment. They even deleted the app block, saved, and added it again in the screencast so it should be loading the latest published app extension version.

 

I'm not able to replicate this issue in any other stores, and I have never seen this before. Has anyone come across this or has any ideas for troubleshooting? Please see attached screencast. IDs and app name have been redacted for privacy.

Replies 17 (17)

made4Uo
Shopify Partner
3805 713 1127

Hi @s5-jordan 

 

This happens when the template still showing the app code instead of deleting it. Try replicating the process by adding the app, and removing the app. The section must delete the app block after app was removed. The block id changes everytime you add an app. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
felixmpaulus
Shopify Partner
49 0 19

what does this reply even mean? 

 

I encounter the same issue with my app that has been working perfectly for a year. I just published an update for the extension and now hundreds of users don't see my app in their stores....

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Thanks for replying Felix. I'm glad I'm not the only one facing this issue. Is there anything that changed since this issue popped up for you, like updating any packages? I'm trying to look at every possible angle, but everything keeps pointing towards this being a bug in Shopify somewhere, and not related to my app.

felixmpaulus
Shopify Partner
49 0 19

I have no idea. Writing a support ticket now. My guess is it hast to do with the CLI switch from 2.0 to 3.0. It is so annoying since I also pushed a rather huge update to the App itself which I now have to remove. I would not even know how to go about debugging this. When I deploy my App and the extension is build, it very clearly show the reference to the correct App. So why would the URL change...

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Interesting, please keep me posted if you come across any clues and I will do the same as well! Hopefully we can get this resolved quickly.

felixmpaulus
Shopify Partner
49 0 19

So I contacted the partner support and they said that they can not help me and that I need to create a Github issue.
This is the issue: https://github.com/Shopify/cli/issues/2156

I hope this gets fixed soon.

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Suddenly this error comment disappeared for me, and I was able to trace the root cause.

 

The issue for me was if you're developing an extension in "development store preview" mode, it appends a "?v=1234" query parameter to asset_urls. In my case, I was trying to load a script tag and was adding some additional query params to it with "&param1=123&param2=456" etc. Since they were testing this app in a production storefront, the production extensions do NOT have the "?v=1234" query param, so my URL was missing the leading "?" before my params. Very confusing and frustrating. Not sure if this helps you out, but it solved my problem when I changed my params to "?param1=123&param2=456". 

felixmpaulus
Shopify Partner
49 0 19

Thank you for the info. What requests are you talking about precisely? You mean requests made by the extension's javascript after the App Block has loaded? Or you mean internal requests that load the App Block itself? It the latter, how would you control the request url?

 

 

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Inside my extension's liquid file, I have a dynamic script tag that I'm adding query parameters to. It looks something like this in production now:

 

 

<script src="{{ 'myfile.js' | asset_url }}?paramOne={{ paramOne }}&paramTwo={{ paramTwo }}&paramThree={{ paramThree }}" async></script>

 

 

The key is ensuring that your first query parameter has a "?" in production, because in development preview mode, the "asset_url" utility automatically adds its own query param which looks something like "?v=1234". You can quickly run into an issue with an invalid URL in production since this "?v=" param does not exist there which is what was happening to me.

felixmpaulus
Shopify Partner
49 0 19

Thank you, I fully understand you know.

 

It must be something else for me, this is how my liquid file looks:

 

 

 

{%- liquid
unless product
assign product = all_products[section.settings.featured_product]
endunless
-%}

<div
id="b-b-b-container"
myshopifydomain="{{ shop.permanent_domain }}"
producttype="{{ product.type }}"
vendor="{{ product.vendor }}"></div>

{% schema %}
{
"name": "App Name",
"target": "section",
"javascript": "script.js",
"templates": ["product"],
"settings": []
}
{% endschema %}

 

 

I store the necessary data in the div-element via liquid and then read it afterwards from the script.

My logic happens inside script.js which is part of the extension directory. 

 

I am glad it works for you! 🙂

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Interesting, we have a very similar setup to this as well. The only thing I could recommend doing is verifying that all of those fields you're injecting into that div exist (e.g. product.type and product.vendor). I find that Shopify will sometimes silently fail if something is undefined. Sorry I can't be of more help. If I think of anything else, I'll make sure to come back and reply here.

felixmpaulus
Shopify Partner
49 0 19

Thats unfortunately not the issue.

Even this reproduces the problem:

 

<div>.</div>

{% schema %}
  {
    "name": "App Name",
    "target": "section"
  }
{% endschema %}

 

How did you find out about the cause?

I am having trouble identifying the request that loads the App Block.

Thank you for your help so far! 🙂

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

To be completely honest, it was just luck. Something must have recently changed on Shopify's side around the original HTML comment error that I saw. This week it just randomly disappeared without me changing anything, and that allowed me to see the GET request in my network tab to the .js file I was loading. Before when the HTML comment error was showing, none of my extension's assets were loading so it was virtually impossible to debug.

felixmpaulus
Shopify Partner
49 0 19

Yes my assets do not load either.

Well, good look with the review process!

 

If this issue is solved I might give an update here.

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
felixmpaulus
Shopify Partner
49 0 19

I thought I could give a short update:

 

The Github issue has been completely ignored.

The Shopify Support took the issue a bit more serious after I opened a second ticket. We emailed back and forth for about 5 weeks until they told me they could not find the cause and since I was the only merchant with that problem they would stop the support.

 

I then removed my extension completely and added it again as a new one, causing the App to stop working for hundreds of customers.  I had to email each one of them to let them know that they need to add the App Block again. 

 

Not happy with the outcome, but could have ended way worse. 

 

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.
s5-jordan
Shopify Partner
10 0 8

Thanks for the reply, however this does not work or change the outcome. Removing and re-adding the block still has the same outcome on the store in question. I'm still not able to replicate this on any other stores as well.

s5-jordan
Shopify Partner
10 0 8

Thank you. Good luck to you as well. Try deleting the app block every once in a while and re-adding it in the theme editor. You might just end up getting lucky like me. Also, try turning off "DEVELOPMENT STORE PREVIEW" mode where you publish different versions of the extension and see if that makes a difference for you too.