Beauty Affairs HK

Asset not loading

Use this when a component does nothing on the page, a stylesheet is missing, or the browser reports a 404 for a file in assets/.

The usual cause is a vite-tag path that matches no branch of the generated snippet. Liquid then outputs nothing and reports no error.

Diagnose

1. Check whether the tag is missing or the code is broken. View source and search for the bundle name. If the page has no <script> or <link> for it, the problem is in the Liquid render, not in the JavaScript.

2. Find the render call.

grep -rn "vite-tag' with" sections snippets layout templates | grep my-feature

3. Compare the path with the generated snippet. The path must be relative to src/entrypoints, with no leading slash, and must include the file extension.

grep -n "my-feature" snippets/vite-tag.liquid

No match means the build generated the snippet before the file existed, or the file is somewhere else.

4. Confirm the file is where the build looks.

ls src/entrypoints/my-feature.ts

5. Check which layout the page uses. An asset rendered from layout/theme.liquid is missing on templates that use layout/theme.medispa-redesign.liquid or layout/theme.discovery-bar.liquid.

6. Check whether the snippet points at a dev server.

grep -c "localhost:5173" snippets/vite-tag.liquid

If the count is above zero on any theme other than your local dev session, someone committed or pushed a dev-mode vite-tag.liquid. That breaks every bundle on the storefront.

Repair

The path did not match. Correct the path in the Liquid file, then rebuild so the snippet regenerates:

npm run build

The snippet is out of date. Rebuild, and commit snippets/vite-tag.liquid with your change.

The snippet holds dev server URLs. Rebuild and push straight away. Every feature that depends on JavaScript is down on the storefront until you do.

npm run build
grep -c "localhost:5173" snippets/vite-tag.liquid   # expect 0
npm run list
npm run push -- --theme <theme-id>

The tag is present but the asset returns 404. Someone removed the hashed file from assets/ without rebuilding, or the push did not include it. Rebuild and push.

The page uses a different layout. Add the render to the other layout, or move it into a snippet that all three layouts include.

Verify

  1. Hard reload the affected page and confirm the tag appears in view source.
  2. Confirm the file returns 200 in the network tab.
  3. Confirm the component works.
  4. Check one page from each layout, because a fix in one layout does not reach the others.

Roll back

npm run push overwrites the theme you pick, so to roll back, push the previous commit to the same theme:

git stash
git checkout <last-good-commit>
npm run build
npm run push -- --theme <theme-id>

Shopify cannot restore a whole theme to an earlier point. The code editor's Timeline view restores one file at a time, and it keeps no history for files in assets/, so it cannot bring back a compiled bundle. If the bad push reached the live theme, republishing the previous theme is faster than a git rollback. See Deploy and roll back.

On this page