[Bug]: blank screen when you have vanilla javascript

[tentree-development]

Operating system

os x

Node.js version

17.6.0

Shopify CLI version

2.11.2

Browsers

Chrome

Version

4 (Current)

Modifications

No response

Details

1. I am developing shopify store based os2.0 with uicrook.
2. When I have javascript some vanilla javascript in the page template and I get the blank screen
3. when I run into issue I have something like this and only happens when I push to shopify it works nicely in the local environment.
4. I want to find out if I use uicrook vannila javascript is not allowed in the .*liquid file?

Uncaught SyntaxError: 60
    at Yo (bundle.js?v=174704609598485302911655352976:68:540697)
    at Pf (bundle.js?v=174704609598485302911655352976:68:584847)
    at Array.Af (bundle.js?v=174704609598485302911655352976:68:585222)
    at su (bundle.js?v=174704609598485302911655352976:68:559818)
    at bundle.js?v=174704609598485302911655352976:68:560222
    at su (bundle.js?v=174704609598485302911655352976:68:560232)
    at bundle.js?v=174704609598485302911655352976:68:560222
    at su (bundle.js?v=174704609598485302911655352976:68:560232)
    at bundle.js?v=174704609598485302911655352976:68:560222
    at su (bundle.js?v=174704609598485302911655352976:68:560232)

Notice

• [X] I read the notice

[pstinnett]

I was similarly scratching my head at the same thing this morning and found: https://github.com/laravel-mix/laravel-mix/issues/3112

Essentially, a tag inside a Vue app causing the same issue. In my case, I was able to move the in template vanilla JS out of the #app container and things worked fine.

[sergejcodes]

Instead of writing the vanilla <script></script> tag inside the Vue app you should be able to use <component is="script"></component> tag and place your JS Code in there

<div id="app">
  <component is="style">
    ...
  <componet>

  <component is="script">
    ...
  </componet>
</div>

[sk29110]

I will try. I also have a problem with shopify app using google map and yotpo royalty app. It provides javascript object however it's javascript object doesn't allow me to call functions in strict mode. Do you have solution to this?

[n-va]

Would really love a fix for this as there are various Shopify apps that inject script tags, for which there's not really a work around.

[lexthor]

any update on this? a lot of apps are using the Githubissues.

Githubissues is a development platform for aggregating issues.