Code inside {% javascript %} always show the previous version

Technical Q&A
1

Hi, I detected strange behavior working with the Liquid tag {% javascript %}.

I move to other file some of the custom components created by default in the Dawn theme, but I do not change the JS code. All seemed to work well, and I deployed to production. In production, this code not works properly, and after a long time debugging it, I found that the code inside {% javascript %} always show the previous state of code, like there’s a cache or something.

For instance:

  1. I create a console.log(“a”) in my code, inside the {% javascript %} tag, and save it.

  2. The web console not shows nothing.

  3. I modify the console log to console.log(“b”) and save it.

  4. The web console shows “a”.

  5. I remove the console.log and save it.

  6. The web console shows “b”.

This happens in local (with Shopify CLI) and in production.

  • Dawn v.7.0.1

  • Shopify CLI and GitHub integration

2

Hi @ivanbarcia ,

You can change:

{% javascript %} =>

it will work fine. Refer https://shopify.dev/themes/architecture/sections/section-assets#javascript

Hope it helps!

3

Thanks for your reply. That is not very correct on many occasions. If we are dealing with a section that is used in different places, you may be loading the same JS several times. That’s what{% javascript %} avoids and that’s why I was trying to use it in this case.