Why does asset_url generate incorrect path causing 404 errors?

Technical Q&A
1

Hello people,

I wonder why in some instances asset_url generates an incorrect path to cdn which results in 404 errors.

So, I have these preload asset instructions in my theme.liquid:

<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'editions.js' | asset_url }}" as="script">

I run shopify theme dev command, log in and sync in. The website loads, but incorrectly due to the missing js script. The response body of the main html loaded from my localhost has the above instructions replaced with these URLs:

<link rel="preload" href="//<shop_id>.myshopify.com/cdn/shop/t/93/assets/theme.css?v=152583154070036785091685997919" as="style"> 
<link rel="preload" href="//<shop_id>.myshopify.com/assets/editions.js?v=25944027737304671261685997927" as="script">

where <shop_id> is the ID of the shop this problem occurs for.

Look how the first URL has cdn/shop/t/93 part, and the second doesn’t. The missing part causes the second URL request to be redirected to https://<shop_domain>.com/assets/editions.js?v=25944027737304671261685997927 and this one fails with 404.

Any idea what causes this discrepancy in two paths even though both links has the same asset_url?

Thank you!

1 Like
2

The discrepancy you’re experiencing with asset_url generating incorrect paths to the CDN and resulting in 404 errors can be caused by various factors. Here are a few potential reasons:

  1. Theme caching: Shopify may cache certain assets to improve performance. If you’ve made recent changes to your theme files, the cached version might still be used, leading to incorrect URLs. Clearing the cache can help resolve this issue. You can try clearing the cache by appending a query parameter to the asset URL, such as {{ ‘theme.css’ | asset_url | append: ‘?v=’ | append: ‘timestamp’ }}, where ‘timestamp’ is a unique value that changes each time you make modifications.

  2. Asset versioning: Shopify automatically appends a version parameter to asset URLs to ensure proper caching. If you’re using a development environment or syncing changes, the asset version might not update correctly. Ensure that your development environment is properly set up to manage asset versioning and synchronization.

3

Thank you for your reply!

As a matter of fact, nothing was changed on my local. I just pulled the theme files, tried to make the website running locally for the first time, and the problem popped up.

Can you elaborate on Ensure that your development environment is properly set up to manage asset versioning and synchronization? I followed the original Shopify guidelines and am not sure what actions can be missed. Thank you!

4

We had this issue today, it seems like something broke in the latest CLI release 3.46.2, and the Liquid compiler is using an incorrect path for the asset_url filter.

We solved this by downgrading our CLI to 3.45.x via npm.

Chaos engineering at its finest.