search

instantpage / instant.page

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
https://instant.page
MIT License
6.01k stars 206 forks source link

Minification causes conflicts with other minified scripts #113

Open MassimilianoRonchetti opened 1 year ago

MassimilianoRonchetti commented 1 year ago

Using global variables in your script creates conflicts.

I used your minified script, the variables became "a", "b", etc.. Another script within the "if" condition uses the variable "a".

"Uncaught SyntaxError: Identifier 'a' has already been declared" appeared in console.

Code example: https://drive.google.com/file/d/1HOi6hl1FVzH6QRXDPeibYskyIcGjN7Up/view?usp=sharing

We had to remove your script to get the rest to work.

Is there any way to fix it? Wouldn't it be better to put everything inside a IIFE?

bjrn commented 1 year ago

Did you add the script with <script type="module", as in the example code on instant.page? That would prevent the globals, as nothing is exported.

MassimilianoRonchetti commented 1 year ago

I use Shopify and the script is inserted into the theme through an App: the "instant-page" script was not imported as <script type="module" but as <script type="text/javascript"

I will notify the third party App team and come back with feedback.

For now, thanks!

MassimilianoRonchetti commented 1 year ago

I got news about the bug, the App that includes your script cannot act on how to integrate the JS script into Shopify. Shopify has decided that the script must be integrated in this way: <script type="text/javascript"

So if an app or widget wanted to use your code to integrate it into larger platforms, as explained above, it could break JS code if you leave the global variables without adding IFEE.