Minified version of Splide breaks within Shopify

[alvinkonda]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4

Description

Recently Shopify did an upgrade to their system and added the following code

<script id="evids-setup">
--
let t,e;function n(){t={page_viewed:{},collection_viewed:{},product_viewed:{},product_variant_viewed:{},search_submitted:{},product_added_to_cart:{},checkout_started:{},checkout_completed:{},payment_info_submitted:{}},e={wpm:{},trekkie:{}}}function o(t){return`${t\|\|"sh"}-${function(){const t="xxxx-4xxx-xxxx-xxxxxxxxxxxx";let e="";try{const n=window.crypto,o=new Uint16Array(31);n.getRandomValues(o);let r=0;e=t.replace(/[x]/g,(t=>{const e=o[r]%16;return r++,("x"===t?e:3&e\|8).toString(16)})).toUpperCase()}catch(n){e=t.replace(/[x]/g,(t=>{const e=16*Math.random()\|0;return("x"===t?e:3&e\|8).toString(16)})).toUpperCase()}return`${function(){let t=0,e=0;t=(new Date).getTime()>>>0;try{e=performance.now()>>>0}catch(t){e=0}const n=Math.abs(t+e).toString(16).toLowerCase();return"00000000".substr(0,8-n.length)+n}()}-${e}`}()}`}function r(n,r){if(!t[n]\|\|"trekkie"!==(null==r?void 0:r.analyticsFramework)&&"wpm"!==(null==r?void 0:r.analyticsFramework))return o("shu");const i="string"==typeof(c=r.cacheKey)&&c?c:"default";var c;const a=function(t,n,o){const r=e[n];return void 0===r[t]&&(r[t]={}),void 0===r[t][o]?r[t][o]=0:r[t][o]+=1,r[t][o]}(n,r.analyticsFramework,i);return function(e,n,r){const i=t[e];if(void 0===i[r]){const t=o();i[r]=[t]}else if(void 0===i[r][n]){const t=o();i[r].push(t)}return i[r][n]}(n,a,i)}function i(){window.Shopify=window.Shopify\|\|{},n(),window.Shopify.evids=(t,e)=>r(t,e)}i();;
</script>

The above code conflicted with the minified version of Splide since they are both using the variable "t" in the global scope causing us to break multiple stores at the same time that were using Splide.

I'm not sure how you did the modification thing but clearly, it should be put within a closure or sth to prevent the conflict.

Reproduction Link

No response

Steps to Reproduce

Mentioned above

Expected Behaviour

Mentioned above

[adamchipperfield]

Same here!

[danny-date]

also here, is there a hotfix for this?

[alvinkonda]

Just use the uncompressed version, or better yet properly compress it using a tool like this to save some KB

https://jscompress.com/

[tomgreenhill]

Experiencing the same problem, so thought I would try switch to using Skypack to serve Splide, but there's an issue building the module. Any chance this could be looked at too? Many thanks!

[lawrencetaur]

Can confirm the same issue.

Steps on how I fixed it based on the above replies, thank you!

1. fetch the latest unminified https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.js
2. compress using https://jscompress.com/
3. add the compressed to your assets file.

[thagxt]

Honestly this is a Shopify bug not a Splide one. You can't push such code to all stores and expect to not break a tons of sites. This is not affecting just SplideJS, it is affecting other scripts as well. SMH