"SyntaxError: invalid range in character class" error on firefox but not Chrome

[zeluspudding]

Hi Idyll team (Matt), I'm not sure if this is a Firefox issue, an Idyll issue, or a Bubble issue. In short, I'm trying to integrate Idyll on Bubble so I can finally have a decent (more like phenomenal) way to publish interactive articles for my blog. As you know, we've gotten Idyll embed to work on codepen (both in firefox and chrome).

So now I'm trying to get it to work on Bubble and I'm seeing weird results. Here's what I mean:

Using Firefox:

1. If I visit https://scious.bubbleapps.io/idyll-not-in-an-iframe then I get error Idyll is not defined
2. If I visit https://scious.bubbleapps.io/idyll-in-an-iframe, then I get error SyntaxError: invalid range in character class

However, if using Chrome:

3. When I visit https://scious.bubbleapps.io/idyll-not-in-an-iframe then I still get error Idyll is not defined
4. But if I visit https://scious.bubbleapps.io/idyll-in-an-iframe, then it works fine:

Stranger still is that it will sometimes work in firefox only to disappear later. I've tried all sorts of minor code tweaks to get this working like changing the point at which I load Idyll (in the header, within the body tag, or after the body tag). In my current setup I've added the defer instruction in the second script tag.. which seems to be help things load consistently only in scenario 4.

Any ideas if this is an Idyll side issue? Would be glad to give you access to my bubble application if you think there's something there you would like to / want to test further.

[zeluspudding]

The plot thickens. I finally got Idyll to load in Bubble in a way that doesn't throw an explicit error. I've done it without an iframe at this url which seems to show the same behavior on Firefox & Chrome - specifically that Idyll's HTML content nodes are present but not showing. Here's what I mean:

So what you're seeing is that our Hello World Example is added to the DOM but isn't actually visible to the naked eye. I also have delayed injecting Idyll until 3 seconds after page load which can be observed when we see the Bubble Logo disappear. This makes me wonder if Idyll is leaking variables or CSS onto Bubble's page... If so, that could be consistent with that I've seen Idyll work sometimes in Bubble... like every 26th reload of the page... almost as if there are race conditions which let Idyll occasionally appear.

If that's the case, I can try to use an iframe here, but that brings us back to the scenario 2 error from my prior post where Idyll only works in Chrome.

Addendum

Clearly there's something funny going on between Idyll and Bubble - after all, the same Idyll code (linked again here) consistently works fine on codepen across browsers. Really hope there's a way to get Idyll working on Bubble. I think it would be a great marriage of two technologies - Idyll which is a phenomenal way to tell rich, interactive stories, and Bubble, which could be a fantastic way to host and share them.

[mathisonian]

Hey @zeluspudding - thanks for the detailed reporting on this. I likely won't have a chance to look into it closely until the end of the week.

What I did notice is that in the last example you posted (https://scious.bubbleapps.io/idyll-not-in-an-iframe-2), the content is being blocked due to the inline background that is set on the <div class="main-page bubble-element Page">...</div>.

Are you using https://github.com/idyll-lang/idyll-embed or just calling IdyllDocument directly to do the embedding on the page?

[zeluspudding]

Good morning @mathisonian! Thanks for the message :) Looking forward to your follow up later in the week. Until then, here's a bit more of what I've found:

To answer your question, yes, I am using https://github.com/idyll-lang/idyll-embed like this

I feel a tad foolish I didn't catch the white background. You're right. If I get rid of that, then I can clearly see the rendered Idyll document in chrome (https://scious.bubbleapps.io/version-test/idyll-not-in-an-iframe3). Oddly enough, even before I removed the background style, I noticed that the URL https://scious.bubbleapps.io/idyll-not-in-an-iframe-2 ... of which I'm 100% sure was running errorless in Firefox and Chrome, now throws an error in Firefox.

I've isolated this to what I'm now thinking is an Idyll to Firefox (not an Idyll-to-Bubble) issue. You can see what I mean by visiting https://codepen.io/aagostini/pen/qBdZWQN?editors=0010 in Firefox & Chrome. Here's what it looks like in chrome:

But here's what it looks like in firefox:

Firefox's debugger points us to character 95,014 on line 44 as a point of failure (the = sign)

I tried to investigate further by comparing that section of code as it looks in Chrome versus how it looks in Firefox but could not find any visual difference - like Firefox does not appear to be reading the encoding differently than Chrome. So I'm thinking it's interpreting that line a tad differently than Chrome?

WAIT A SECOND WATSON!

https://codepen.io/aagostini/pen/WNvweyK?editors=0010 is working in Firefox now. It wasn't a second ago, but I did a hard refresh and now it is (albeit with two unreachable code after return statement warnings).

Not only in codepen, but also in my bubble app on Firefox:

This makes me think I cleared an Idyll cookie that was causing problems... But I can't seem to trace any cookie or session storage to Idyll... strange. Thoughts?

[mathisonian]

@zeluspudding I just tried loading the link here https://codepen.io/aagostini/pen/WNvweyK?editors=0010 and it seems to work in firefox. Idyll doesn't store any cookies or use local storage (unless you've written a custom context plugin that does this).

So I guess I'm not sure what the state of this is... do we have a reproduction of the error? Is it possible that this was some issue that has been fixed but was still cached for a while?

[zeluspudding]

Sorry, meant to update this today. I think I've managed to implement a solution here. You may be right that it was a cached issue that caused Idyll to sporadically fail in Firefox. Will close and revisit if I see the bug resurface. Thanks for your consideration :)

[mathisonian]

Sounds good! Feel free to re-open if it seems like this is still an issue.