Uncaught SyntaxError in ESM supported Chrome 61

[hyunbinseo]

Description

Vite's default browser support baseline is Native ESM according to these sources.

• Vite / Config / Build Options
• @vitejs/plugin-legacy

Therefore, I was targeting browsers that supported <script type="module">.

This includes Chrome 61 and above, according to caniuse.com and MDN Web docs.

△ ESM support: Chrome 61 ✅ Chrome 60 ❎

---

However, when attempting to load a SvelteKit built website in Chromium 61, the following error occurs.

△ <script type="module" data-sveltekit-hydrate="13pf6wa"> : Uncaught SyntaxError: Unexpected token import

Questions

1. Is there a way to overcome this? Seems to be caused by the data-sveltekit-hydrate attribute in <script type="module">.
2. If not, what is the minimum Chrome(Chromium) version that I should target?

Notes

• Last tested with [email protected] and a Skeleton project template.
• In tsconfig.json, setting the compilerOptions.target and compilerOptions.module to ES6 does not resolve the issue.
• Implementing fallback using <script nomodule> is not possible. Chrome 61 supports <script type="module">.
• Browser testing using Playwright is not possible. It supports Chromium 84+. [Question] Is it possible to specify browser versions? microsoft/playwright#2115

Reproduction

1. Install and launch ChromiumPortable_61.0.3153.0.
2. Initialize a SvelteKit application with npm create svelte my-app.
3. npm run install → npm run build → npm run preview
4. Open localhost:3000 with the above web browser.
5. Open developer tools and check the error.

[benmccann]

Chrome auto-updates. Why would anyone ever be using Chrome 61?

[hyunbinseo]

South Korean PC cafes use custom Windows ghost images, and they sometimes have custom versions of Chrome (portable) installed. These Chrome browsers are mostly out of date (unlike the readily patched games), and some of them have their auto-update disabled or removed completely. I have personally seen years-old Chromium browsers.

Therefore, knowing the minimum required versions of Chrome or Blink is important to properly handle unsupported browsers.

Fun fact. There are also a lot of South Korean government offices that still use the initial build of Windows 10, which includes the old Edge web browser (EdgeHTML) that does not support <script type="module">.

[hakanertug]

Hello,
i have the same problem
@hyunbinseo did you solve the problem?

[hyunbinseo]

What version of Chrome are you targeting?

Since the Vite 4's browser requirements are

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

I have not checked on Chrome 61 since.