instantpage/instant.page

Minification causes conflicts with other minified scripts

Opened this issue · 3 comments

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

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.

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!

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.