HTML escaping bug. `remote_api_scripts` breaks cart page via `jsContext` right after adding a product into the cart.

[kevindees]

Expected behavior

When adding a product to the cart we expect the item to get added and the cart page to keep working as expected when using jsContext.

Actual behavior

However, remote_api_scripts injected script with function fbq('track', 'AddToCart', {...}) breaks cart page right after adding a product into the cart. This bug breaks themes that use jsContext on the base.html page. Here is the error part of the remote_api_scripts when using jsContext. Note, the escaping is totally broken for remote_api_scripts.

 window.jsContextJson = "{\"themeSettings\":{},\"remote_api_scripts\":[\"<script type=\\\"text/javascript\\\">\\nfbq('track', 'AddToCart', {\\\"content_type\\\":\\\"product_group\\\",\\\"content_ids\\\":[\\\"2825\\\"],\\\"value\\\":150,\\\"currency\\\":\\\"USD\\\"}, {\\\"eventID\\\":\\\"store-8-prd-us-central1-103958500003\\\"});\\n</script>\"],\"shipping_handling\":{}"; 

This malformed code causes HTML parsing to fail and breaks the cart page in all web browsers.

Note, if a user reloads the page the cart starts working again because they did not add an item to the cart. So, the checkout does not work after a user adds items to the cart which seems like a critical bug.

Related question from community https://support.bigcommerce.com/s/question/0D54O00006yQLD5/remoteapiscripts-fbq-break-cart-page?language=en_US

Steps to reproduce behavior

Here is the code in our base.html layout file and what the error is around.

<!-- jsContext -->
<script>
{{inject "cart" cart}}
{{inject "customer" customer}}
window.jsContextJson = {{jsContext}}; 
</script>
<script>
// Exported in app.js
window.stencilBootstrap("{{page_type}}", window.jsContextJson).load();
</script>

Temp Fix (BAD SOLUTION)

To fix this error (my fix is a very BAD SOLUTION but I have no choice) I have to detect the error with a try/catch. This is not ideal because this could lead to an infinite loop reloading the page if other bugs came into play down the line.

<!-- jsContext -->
<script>
{{inject "cart" cart}}
{{inject "customer" customer}}
window.jsContextJson = {{jsContext}}; 
</script>
<script>
try {
JSON.parse(window.jsContextJson)
} catch (error) {
location.reload();
}
        
// Exported in app.js
window.stencilBootstrap("{{page_type}}", window.jsContextJson).load();
</script>

[rensite]

Today stumbled upon this bug as well. Any updates on the issue?