Shopify / Shopify/liquid

Template literals cause syntax error inside {% javascript %} Liquid tag

Open
#2,042 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

Description

Using JavaScript template literals (backticks) inside Shopify’s {% javascript %} Liquid tag
causes a syntax/parsing error. The same code works correctly when rewritten using
string concatenation.

This appears to be a Liquid parsing issue rather than a JavaScript syntax problem.

Failing example
{% javascript %}
this._inner.style.transform = `translate3d(${this._x}px,0,0)`;
{% endjavascript %}
Error

Error is a bit strange, in scripts it fails at parsing all section javascripts into a single scripts.js file:
Image

Additional context

This parsing error only reproduces when the JavaScript is defined inside a
Custom Element (HTMLElement subclass). When similar code is placed outside
of a Custom Element, the {% javascript %} tag does not throw an error.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the failing JavaScript template-literal example inside a Custom Element and trace how the {% javascript %} Liquid tag parses and combines section scripts into scripts.js. Done means the example parses successfully without breaking the existing behavior for JavaScript outside Custom Elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
backend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.