JavaScript in Theme App Extension blocks exceeds compressed size threshold (10000 Bytes)

[adithwip]

Hello Shopify team, I hope you all have a great day!

I developed a Theme App Extension for a Shopify App with React. So, the build file is used in the Block liquid file. But then, when I deploy the app with shopify deploy There's this message:

 theme_extensions | Running theme check on your Theme app extension...
 theme_extensions | Checking /Users/adith/Documents/work/shopify_app_recipe_frontend/extensions/recipe-ext ...
 theme_extensions | blocks/app-block.liquid:25: suggestion: AssetSizeAppBlockJavaScript: JavaScript in Theme App Extension blocks exceeds compressed size threshold (10000 Bytes).
 theme_extensions |     {% schema %}
 theme_extensions |        ^^^^^^^
 theme_extensions |
 theme_extensions | 3 files inspected, 1 offense detected, 0 offenses auto-correctable

Have I made a mistake by choosing React (with CRA) to build the Theme App Extension frontend, instead of pure Liquid? I assume my Shopify App as a whole will be rejected by Shopify once I want to publish it. Any advice?

Thanks!

[jamsmd]

Same here, any progress?

[panzi]

I'm over that limit with a little bit of vanilla JavaScript (with JSDoc type comments). Is there perhaps a way to minify the JavaScript on deploy?

[michaelwang11394]

Same exact problem

[ds17f]

I found a fix while working on a similar problem. It appears that in version 3.x of the Shopify Cli the check for file size on the included javascript was enabled by default. (See here: https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/asset-size-javascript#disabling-this-check). This can be disabled by wrapping the included JS in a theme-check-disable statement for AssetSizeJavaScript.

This gets done in the theme app extension, not in the theme itself. And I couldn't figure out a way to do it around a liquid schema tag. As a result I had to include the JS via a script tag and then wrap the script tag. For example:

{% # theme-check-disable AssetSizeJavaScript %}
<script src="{{ 'react-extension.js' | asset_url }}" defer></script>
{% # theme-check-enable AssetSizeJavaScript %}
<span>This is liquid</span>
<div id="container"></div>

{% schema %}
  {
    "name": "React Extension Tutorial",
    "target": "section",
    "settings": []
  }
{% endschema %}

I tested this and it works as expected.

It also appears that this can be defined for the entire Theme App Extension by adding a .theme-check.yml file to the root of the extension (next to the shopify.extension.toml) and adding

AssetSizeJavaScript:
  enabled: false
  severity: suggestion
  threshold_in_bytes: 10000

or something similar. (reference: https://shopify.dev/docs/storefronts/themes/tools/theme-check/configuration). However this does not seem to address inclusion in the schema tag. This still requires an explicit reference to a <script> tag which includes the JS.