Astro fails to hydrate svelte component in Safari 13.

[Darshan-H-E]

Astro Info

Astro                    v4.6.0
Node                     v20.12.2
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

Safari 13

Describe the Bug

The "Example" svelte component is hydrated successfully for safari 14 and above but fails to hydrate for safari 13. It throws the following error in console.

• SyntaxError: Unexpected token '.'
• SyntaxError: Unexpected token ';'. Expected an opening '(' before a method's parameter list.
• [astro-island] Error hydrating /src/components/Example.svelte -
SyntaxError: Unexpected token ';'. Expected an opening '(' before a method's parameter list. - client:959

What's the expected result?

The "Example" svelte component should be hydrated successfully for safari 13.

Link to Minimal Reproducible Example

https://github.com/Darshan-H-E/astro-safari-13-bug

Participation

• [ ] I am willing to submit a pull request for this issue.

[bluwy]

Is this in dev? In dev you should be using the latest browser possible as the code isn't transpiled to lower browser targets for performance (by Vite). The error is likely due to Safari not recognizing ?.. If you want to test lower browser versions, you should build your project first, and make sure you have the proper browser targets set, e.g. vite.build.target (only covers syntax support, not polyfills).

[Darshan-H-E]

The bug is observed in both production build and dev. I'm trying to use astro for a website that I'm working on which is displayed in WKWebview of an iOS project. The minimum support version of this iOS project is iOS 13 which uses Safari 13.

Regarding polyfills, could you redirect me to relevant documentation which would help me achieve polyfill in this case so that I can support Safari 13 as well?