search

Shopify / themekit

Shopify theme development command line tool.
https://shopify.dev/tools/theme-kit
MIT License
1.19k stars 374 forks source link

Shopify Storefront error: Unexpected character Å/ï does not get always caught by theme kit and that breaks places #958

Open msyyn opened 3 years ago

msyyn commented 3 years ago

Describe the bug When entering a non-breaking space (further nbsp) character sometimes breaks the page it's being located in. This can happen in either section or snippet files, probably others too but those are the tested ones.

Shortcuts to produce nbsp, depending on your OS:

You can use this Visual Studio extension to visualize nbsp in your code while reproducing the issue.

To Reproduce Steps to reproduce the behavior:

  1. run command 'theme watch' on your test store
  2. add non-breaking space somewhere of the following:
    • Snippet file: -- Within {% liquid %} tags at the end of assign, e.g. assign hello = "world"(nbsp) -- Within filter, e.g. {{ text |(nbsp)strip }}
    • Section file: -- At the end of filter, e.g. {{ text | strip(nbsp)}}
  3. make sure you load snippet/section on a page, e.g. front-page of a store to test this out.
  4. console should NOT warn about unexpected character
  5. loading online store page with snippet/section in use will load "Problem loading page" view

Expected behavior Console will either warn about unexpected character Å/ï in specified line (works as expected) or it will not warn anything and updates the file to store. This causes the "Problem loading page" page to load when accessing the page with faulty characters.

In my case, snippet with nbsp rendered the "Problem loading page" and section with nsbp caused error and canceled deployment. However, my co-worker tested this as well and for them snippet caused errorbut section with nsbp rendered the "Problem loading page".

Notes My suspicion is that this is some kind of encoding issue with Liquid parsing, but that's not really my area of expertise. Just a hunch!

Environment (please complete the following information):