IS not working on firefox

[harshkhandeparkar]

Issue

A few weeks ago, I pushed to the beta site with the new preview compression feature and found that nothing works on firefox.

but the same website works perfectly on chrome

Firefox is my favourite browser and I can't live without it. Therefore this issue bothers me a lot.

Observations

1. https://beta.sequencer.publiclab.org opens on chrome but not on firefox.
   Local IS https://localhost:3000 has the same issue.
   This means that this is not a network issue.

2. @aashna27 also noticed the same issue. This means that this issue is not system-specific.

Tests

I conducted a series of tests locally to pinpoint the issue. Obviously, firefox is the culprit but this doesn't mean that it is a bug. It can also be a restriction imposed on the JS.

1. I tried loading a different file
   I created a random empty js file and linked it in the javascript. The file gets loaded.

2. I tried loading the minified file
   Surprisingly, the minified file loaded.

3. I tried browserifying the file under a different name
   This didn't work. The file still doesn't get loaded.

4. I tried loading all the files there are
   The UI files and all the minified files, random files, etc. do load

5. I tried the production intermediate
   While building the production files, an intermediate file named image-sequencer.brow.js is created which is the same non-minified dist file under a different name. This file also doesn't load.

6. The beta site debugger
   I looked at the debugger on the beta site(as well as locally and the above results are also found using that).
   On the beta site, the file image-sequencer.js is actually minified but has the same name as the non-minified file. This file too wasn't loaded

Under the dist folder, the UI file is loaded but the main file isn't. I checked if the file was actually minified and it was

I checked the cache(after refreshing it)

As can be seen, the UI file and the main file both are being cached.

Speculations

Perms: My first thought was that this is a file permission issue. Turns out, that isn't the case. The file doesn't get loaded even with 777 perms.

Size: The size of the minified file is around 1MB whereas the non-minified version is 3.7MB. This could have been a valid reason as over the last few months a lot of new code has been added due to GSoC but test 6 disproves this as the minified file (with a different name) is not getting loaded.

Crackpot Conjecture: The browser has a problem with the file itself. Even big files like OpenCV do load(7.9MB, both with and without async). This could only mean that the browser hates the file or the filename. This is clearly a candidate for crackpot conjecture(a conjecture/explanation which is too silly to be true is definitely not true). I scratched my head for 3 hours yesterday and I couldn't find the issue so I ended up with such a bad, crackpot conclusion.

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[harshkhandeparkar]

@jywarren @publiclab/is-reviewers this is very important.

[jywarren]

Oh my gosh, @harshkhandeparkar i'm still catching up on things from vacation so apologies for slow reply here. Thanks for the in-depth analysis, it's very impressive ❤️

Do you really think it's the preview compression that was causing it somehow? Or OpenCV somehow?

Does this affect https://sequencer.publiclab.org?

I'm going to try some analysis on Firefox JS console to see if I can dig further into this. Could it possibly have anything to do with the PWA caching?

[harshkhandeparkar]

@jywarren 1. No it currently doesn't affect the main site, it's relatively new. 2. I don't think preview resize or openCV could be the cause because they work fine on chrome. It is something else. 3. Caching has no relation with this as the file is cached though not loaded.

…

On Wed, 21 Aug, 2019, 4:15 AM Jeffrey Warren, ***@***.***> wrote: Oh my gosh, @harshkhandeparkar <https://github.com/HarshKhandeparkar> i'm still catching up on things from vacation so apologies for slow reply here. Thanks for the in-depth analysis, it's very impressive ❤️ Do you really think it's the preview compression that was causing it somehow? Or OpenCV somehow? Does this affect https://sequencer.publiclab.org? I'm going to try some analysis on Firefox JS console to see if I can dig further into this. Could it possibly have anything to do with the PWA caching? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1211?email_source=notifications&email_token=AIJI5H2VKKY45MXHPI22EJ3QFRXZ5A5CNFSM4IMPMCQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4X4HSA#issuecomment-523224008>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIJI5H6RJ4NICJQCFEQ4UNTQFRXZ5ANCNFSM4IMPMCQA> .

[jywarren]

OK, https://beta.sequencer.publiclab.org is indeed showing:

SyntaxError: invalid regexp group image-sequencer.js:1:9
ReferenceError: ImageSequencer is not defined
image-sequencer-ui.js:1:958

Since it's minified, we should look at the exact line of the Regex error while running it locally. It may relate to a different Regex API in Firefox?

[jywarren]

Shouldn't we be able to read the source map to find the exact line?

In any case, this issue marks something similar: sindresorhus/ip-regex#24

I think the key from the comment there is:

Lookbehind regex syntax (which this module uses) is not supported in Firefox. This module targets Node.js and V8, so this is not a concern for me.

https://stackoverflow.com/questions/57469109/syntaxerror-invalid-regexp-group-firefox also highlights that only Chrome allows Regex lookbehinds.

We don't directly use RegExp( anywhere in our code: https://github.com/publiclab/image-sequencer/search?q=regexp%28&unscoped_q=regexp%28

So, this must be via a dependency.

chalk seems to depend on something regex related:

image-sequencer/yarn.lock

Line 1290 in 142c499

escape-string-regexp "^1.0.2"

also escape-string-regexp

image-sequencer/yarn.lock

Line 2454 in 142c499

escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:

and eslint

image-sequencer/yarn.lock

Line 2515 in 142c499

eslint@^6.1.0:

and figures

image-sequencer/yarn.lock

Line 2918 in 142c499

figures@^1.0.1, figures@^1.3.5, figures@^1.4.0, figures@^1.7.0:

actually lots. Let's see what was recently added:

Only these two are from within the past month, all others are 3 months or older:

https://github.com/publiclab/image-sequencer/pull/1183/files

https://github.com/publiclab/image-sequencer/pull/1158/files

puppeteer seems the most likely maybe?

Shouldn't uglify be taking care of these kinds of incompatibilities, or couldn't it?

[rishabhshuklax]

This is also not working in Safari #1541

[harshkhandeparkar]

Firefox fixed their issue.

[jywarren]

If you'd like, we could try setting up firefox tests in Jest?