Theme app extension CSS and JavaScript assets not loading properly in theme editor

Technical Q&A
1

Hi,

I am working on a theme app extension and for some reason, the CSS and JavaScript assets for the extension do not get loaded consistently by the theme editor and by the storefront.
In some cases it works fine, then without any changes in the code, it stops working. After a few page reloads it works again.

The assets are being defined in the schema:

{% schema %}
{
  "name": "My App",
  "target": "section",
  "stylesheet": "styles.css",
  "javascript": "main.js",
  "settings": [...

The size of the files are below the threshold (css 5kb, js 6kb).

I was wondering if this is an issue that appears only during development or something that needs a close look because will affect production as well?

2

hey @feriforgacs try this one plz

Yes, this issue can appear during development due to caching or hot-reload inconsistencies in the theme editor.
It may not happen in production, but it’s important to test thoroughly after deployment.
Try hard refreshing (Ctrl+Shift+R) or clearing cache when it happens.
Ensure your assets are being referenced properly and not dynamically loaded or altered.
If the problem persists, consider reporting it to Shopify support, as it might be a platform-side issue.

3

Thank your for your response @Mustafa_Ali. I have the cache disabled in the browser during development to avoid these kind of issues and on the storefront the css and js files are not requested at all. They are not visible in the source code, nor in the network requests. That’s why I think it’s not related to cache.

4

Hi,

Hope this will help

As you have already tried on cache . Go for follwoing

  • Close and reopen the Theme Editor when it gets buggy.
  • Use --theme-editor-sync with Shopify CLI to make asset syncing more reliable.
  • Check console logs for any errors in loading CSS/JS.
  • Avoid large/complex JS that loads async—test with basic files first.

Seems mostly a development issue

5

Thank you for your help @Small_Task_Help

There are several errors in the console, but none of them are related to the extension, or extension assets. I checked it and those errors are present in the Theme Editor of a completely new dev store as well. I made a test extension with very basic css and js and I was able to reproduce the issue with those as well.

What I noticed though, is that the issue only happens, when I’m trying to test the app extension in the live theme used by the store. When I test the extension with the host theme (url provided by the cli), everything seems to be working fine.

I guess, this must be the main source of the problem. And I hope, that this is not going to be the case in production.

I did not have this issue with app embed blocks, but with regular app blocks.

6

make sure “developer preview” is toggled on/off either in the cli or the apps page in the partner dashboard.
Otherwise the current live assets of the app/extension are being served, not the new development assets.

7

Thank you for your help @PaulNewton

I gave that a try but the issue persist. It was on by default (I guess, that’s the right setup for development), turned it off, made some tests. Turned it on again, and the behavior was the same.

For now I’m not testing the extension with the live theme, only with the host theme. That seems to be working properly.

8

It could be any number of things including your browser cache, or cli
I’d search the cli repo issues GitHub · Where software is built
And-or hop over to the dev forums, search and or cross post
https://community.shopify.dev

9

Something similar was happening to me. To fix it, I stopped including the files as part of the schema and included them as {{ 'newsletter-contact.css' | asset_url | stylesheet_tag }}.

10

@feriforgacs Sometimes it is due to the compatibility or the way of parsing on some browsers as well while editing the code contents. On my end, I will choose to open a new tag under incognito mode page or switch to another browser (like from Google to Firefox for example). This situation will disappear.

You can have a try of what I said here also, it may work, who knows?