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:
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.
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:Interestingly
HTMLElementis not undefined in iOS 9 but its not a class (function) either.typeof HTMLElementequals 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:
You can try this out in Babel REPL by writing
class A extends HTMLElement {}. And with this, the browser would runFunction.toString.call(HTMLElement), which is also faulty if HTMLElement is not a function.Logs
The log on iOS 9 is quite vague:
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
SvelteElementwhich 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.