Opera mini issues #118

evenreven · 2021-08-22T08:42:50Z

evenreven
Aug 22, 2021

I can't make Opera Mini (extreme savings mode) pick up my javascript bundles. I'm pretty sure my settings are correct, because I've got IE11 to work almost flawlessly now through trial and error and judicious use of the additionalLegacyPolyfills array in the vite config.

My error seems to be related to the bundling itself, not any code I've put in there myself. I get this in the (extremely limited) Opera Mini debug console (khio.dev is my test domain (sadly not open to the public) and application_head is my main entrypoint):

Uncaught exception: ReferenceError: Undefined variable: System

Error thrown at line 29, column 204 in https://khio.dev/:
  System.import(document.getElementById('vite-application_head-legacy-entry').getAttribute('data-src'))

I didn't write this code, but I guess the variable System refers to the SystemJS module loader Vite uses for the legacy bundle? Does anyone else's Vite sites work with Opera Mini or is this issue only with my app? If not, should this be reported upstream instead of here?

Answered by ElMassimo

Aug 23, 2021

the SystemJS import works on most browsers, but maybe flakes out on Opera Mini

One would expect some kind of error to happen when loading polyfills-legacy.b26915e4.js, but if nothing happens, perhaps it's a matter of the order in which scripts are executed.

To continue the investigation, you could add an inline script after the legacy tags, and log the System global variable. If it's not defined, then it's time to check the contents of polyfills-legacy.b26915e4.js, verify that System is being defined globally there, and maybe inline that script as well to check if Opera will output a more useful error.

I see the polyfill is imported twice, I guess that's because I have two entrypoints?

…

View full answer

ElMassimo · 2021-08-22T13:16:28Z

ElMassimo
Aug 22, 2021
Maintainer

Hi @evenreven!

I guess the variable System refers to the SystemJS module loader Vite uses for the legacy bundle

Correct.

Vite Ruby injects the polyfill when using vite_legacy_javascript_tag.

From the error, it seems that the polyfill has not loaded when the script attempts to perform a SystemJS import.

Given that you mention it works in IE11, we can discard other potential causes, and you may want to check that the polyfill is effectively being loaded in Opera Mini—perhaps an error occurs when parsing the polyfill that causes the System global not to be injected.

If you can't pinpoint the issue, please share the @vitejs/plugin-legacy version, the HTML with the script tags in production (module and legacy), and a console log to verify that SystemJS is being loaded as expected.

If it turns out to be specific to Opera Mini, it might be worth asking in the SystemJS repo, in case there's a known issue of some sort.

Unrelated: it seems to are using an older version of vite_plugin_legacy, might want to upgrade to simplify the rendered HTML.

0 replies

evenreven · 2021-08-23T11:30:17Z

evenreven
Aug 23, 2021
Author

Thanks for the quick reply. I just upgraded with bundle update and yarn upgrade --latest vite-plugin-ruby so I'm on v3, and then I ran bin/vite upgrade which upgraded vite to 2.5.0 as well. Same issue, but we can take versions out of the equation at least. :)

I took a closer look now and compared the rendered head element on Opera Mini and IE11.

Head element from view source

<html lang="nb" class="js unsupported-browser">
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forside - Kunsthøgskolen i Oslo</title>
<meta name="description" content="Kunsthøgskolen i Oslo er Norges største kunsthøgskole med fagområdene teater, dans, opera, kunst og håndverk, design og billedkunst." />
<link rel="canonical" content="/" />
<script>
  document.documentElement.classList.remove('no-js');
  document.documentElement.classList.add('js');
</script>
<script nomodule="true" src="/vite/assets/polyfills-legacy.b26915e4.js"></script>
<script nomodule="true">System.import('/vite/assets/browser_support.2d2e7b79-legacy.js')</script>
<meta name="author" content="Kunsthøgskolen i Oslo | Oslo National Academy of the Arts">
<meta name="title" content="Forside - Kunsthøgskolen i Oslo" />
<meta property="image" content="/meta-icon-512x512.png"/>
<meta property="og:title" content="Forside - Kunsthøgskolen i Oslo" />
<meta property="og:description" content="Kunsthøgskolen i Oslo er Norges største kunsthøgskole med fagområdene teater, dans, opera, kunst og håndverk, design og billedkunst." /><meta property="og:url" content="https://khio.dev/">
<meta property="og:locale" content="nb" />
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@khiotweet">
<meta name="twitter:creator" content="@khiotweet">
<script src="/vite/assets/application_head.ca96f8d1.js" crossorigin="anonymous" type="module"></script>
<link rel="modulepreload" href="/vite/assets/vendor.95ed0bd4.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" media="all" href="/vite/assets/application_head.4f035fd9.css" crossorigin="anonymous" />
<script nomodule="true" src="/vite/assets/polyfills-legacy.b26915e4.js"></script>
<script nomodule="true">System.import('/vite/assets/application_head.b3be08cc-legacy.js')</script>
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">
</head>
<!-- The body -->
</html>

The <head> is identical. The only difference between the two is that the class unsupported-browser on the html tag is only present on IE11. The script called browser_support.2d2e7b79-legacy.js adds this class based on browserslist-useragent-regexp. I have both as unsupported in the browserslist query, so both should have the class.

Obviously the script itself works, or it wouldn't show up on IE. That also means the SystemJS import works on most browsers, but maybe flakes out on Opera Mini.

Side-note: I can also infer from this that inline scripts work fine in Opera Mini, since the "no-js" class was successfully changed to "js", it's just the SystemJS imported scripts that fail.

I see the polyfill is imported twice, I guess that's because I have two entrypoints? I tried to remove the browser_support js now, didn't make any difference to Opera Mini.

0 replies

ElMassimo · 2021-08-23T11:53:10Z

ElMassimo
Aug 23, 2021
Maintainer

the SystemJS import works on most browsers, but maybe flakes out on Opera Mini

One would expect some kind of error to happen when loading polyfills-legacy.b26915e4.js, but if nothing happens, perhaps it's a matter of the order in which scripts are executed.

To continue the investigation, you could add an inline script after the legacy tags, and log the System global variable. If it's not defined, then it's time to check the contents of polyfills-legacy.b26915e4.js, verify that System is being defined globally there, and maybe inline that script as well to check if Opera will output a more useful error.

I see the polyfill is imported twice, I guess that's because I have two entrypoints?

A shortcoming of the helper tag, which I wrote to cover simpler cases with a single entrypoint. In the next version I could change vite_legacy_polyfill_tag to return nothing after the first time it's called during a request, to prevent duplicate script tags.

0 replies

evenreven · 2021-08-23T12:14:45Z

evenreven
Aug 23, 2021
Author

Yeah, sorry, there is more to the Opera Mini debug:console output, including errors that could be relevant, but it's super-messy and a mile long and most of it is not that informative (e.g. it complains every time it fails at importing my webfont - for a browser that doesn't support webfonts, that's just... noise).

I'll look through it and google the errors and post back. And thanks for the suggestions, I'll try that later today or tomorrow. 👍

0 replies

evenreven · 2021-08-24T22:28:05Z

evenreven
Aug 24, 2021
Author

I don't think it's an upstream issue. I think there is another upstream issue here (probably with vite-plugin-legacy) because I have to set up all polyfills manually instead of getting it done by Babel and core-js, but that's not what's keeping me from producing a bundle that works in Opera Mini. :)

I removed all legacy polyfills now, and I'm adding one by one and testing, and it seems Opera Mini chokes when it comes to the webcomponents polyfill. (I'm not using webcomponents, but it's needed for allowing extending the window object on IE11, apparently (the dreaded Function.prototype.toString: 'this' is not a Function object error)). If I add it, Opera Mini doesn't work, and if I remove it again, IE11 doesn't work. 🤷

I'll try some more tomorrow before I give up and choose to drop support. The tips out there on polyfilling Opera Mini effectively is surprisingly sparse, considering its market share, so it's mostly guesswork.

0 replies

evenreven · 2021-08-31T13:33:13Z

evenreven
Aug 31, 2021
Author

I gave up on this and tried something else. I've done a lot of testing to make sure a barebones version of my site will work well with javascript disabled. So I'm leveraging this by serving javascript with only script type module without legacy bundle at all, and that's that. For a couple of necessary DOM manipulation bits (lazyloading of images specifically), I have a nomodule inline script at the end of the body element that takes care of the bare minimum to make the site work (basically it does what my noscript tags do for those with js disabled).

Sucks for IE11 users since I had a working setup ready to go, but making Opera Mini kinda work is a lot more important due to the user base.

Since this isn't really about vite_ruby after all, I'll mark one of your replies as answer.

2 replies

ElMassimo Aug 31, 2021
Maintainer

Makes sense, supporting legacy browsers is challenging enough without the additional indirection of the legacy plugin.

Out of curiosity, what is the user base for the application?

evenreven Aug 31, 2021
Author

It's not about a specific user base, it's about accessibility, really. The site is the official site of a small/mid-sized arts university where I work. The budgets are small, so I do a lot of stuff myself. It's government-run, so we have an implicit requirement that the site has to be accessible to everyone. We have foreign applicants (some African too), so getting it to kinda work with Opera Mini is a must.

Even though I found it annoying to scrap an IE11 bundle that was working almost as well as a modern browser, the fact is that IE users are on desktop computers and have a choice (even on old computers, some other browser will run), but Opera Mini users use it because they're poor or on terrible connections, so they don't really have that choice. So it's a philosophical difference. (That said, until Opera get their shit together and release a substantial update, it's tempting to forget about its existence. They're holding the web down. At the very least they need to support CSS grid and Mutation and Intersection Observer, it's ridiculous to maintain a browser today that doesn't support this.)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Opera mini issues #118

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Opera mini issues #118

evenreven Aug 22, 2021

Replies: 6 comments · 2 replies

ElMassimo Aug 22, 2021 Maintainer

evenreven Aug 23, 2021 Author

ElMassimo Aug 23, 2021 Maintainer

evenreven Aug 23, 2021 Author

evenreven Aug 24, 2021 Author

evenreven Aug 31, 2021 Author

ElMassimo Aug 31, 2021 Maintainer

evenreven Aug 31, 2021 Author

evenreven
Aug 22, 2021

Replies: 6 comments 2 replies

ElMassimo
Aug 22, 2021
Maintainer

evenreven
Aug 23, 2021
Author

ElMassimo
Aug 23, 2021
Maintainer

evenreven
Aug 23, 2021
Author

evenreven
Aug 24, 2021
Author

evenreven
Aug 31, 2021
Author

ElMassimo Aug 31, 2021
Maintainer

evenreven Aug 31, 2021
Author