Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending HTMLElement crashes in iOS 9 #3608

Closed
davidaq opened this issue Sep 22, 2019 · 2 comments
Closed

Extending HTMLElement crashes in iOS 9 #3608

davidaq opened this issue Sep 22, 2019 · 2 comments

Comments

@davidaq
Copy link
Contributor

davidaq commented Sep 22, 2019

Describe the bug
A web app fully developed in svelte (without SSR) displays blank because the framework fails to initialize. With some effort of debugging, I found out the cause was here in svelte/internal:

let SvelteElement;
if (typeof HTMLElement !== 'undefined') {
    SvelteElement = class extends HTMLElement { // culprit

Interestingly HTMLElement is not undefined in iOS 9 but its not a class (function) either.
typeof HTMLElement equals to "object" in iOS 9.This causes the script to throw and stop running before anything can be seen.

The error wasn't that apparent actually. I used Babel to transpile es6 to es5, which changes class to functions. After transpile there is a native function check:

function _isNativeFunction(fn) {
  return Function.toString.call(fn).indexOf("[native code]") !== -1;
}

You can try this out in Babel REPL by writing class A extends HTMLElement {}. And with this, the browser would run Function.toString.call(HTMLElement), which is also faulty if HTMLElement is not a function.

Logs
The log on iOS 9 is quite vague:

TypeError: Type error

To Reproduce
Just run something written with Svelte on a iOS 9 device. If you can't find one, you can try it out on XCode iPhone simulator just as I did.

Expected behavior
Forget about SvelteElement if HTMLElement isn't extendable.

Information about your Svelte project:

  • Your browser and the version: Safari and iOS UIWebView

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)

  • Svelte version: 3.12.1

  • Whether your project uses Webpack or Rollup: both, the same

Severity
Severe as iOS 9 users are completely unusable because of SvelteElement which is not used at all. There's still 0.7% of my app users with this OS version.

Additional context
I'm actually curious why SvelteElement wasn't dropped by rollup. It's not used at all in my app.

@Conduitry
Copy link
Member

This not getting treeshaken by Rollup is something I actually opened an issue for (rollup/rollup#3115) and which was fixed in 1.21.4. Upgrading Rollup should resolve this (by having this code not even be present in the bundle), but changing this to typeof HTMLElement === 'function' also might make sense.

@davidaq
Copy link
Contributor Author

davidaq commented Sep 22, 2019

@Conduitry Wow nice to see a work around already. Having tree shaking working properly solves my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants