SvelteKit 2 does not transform logical assignments with es2015 target

[bleucitron]

Describe the bug

SvelteKit 2 does not seem to transform production code correctly when build.target is set to es2015 in vite.config.js.

The following error pops up in the console when opening the demo app in a browser that does not support Logical assignments:
SyntaxError: expected expression, got '='

This is due to the presence of a de||=Promise.resolve() in the built code, even though the build target is set to es2015.

A fresh vanilla Vite 5 project with es2015 target does not reproduce this, and works as it should, transforming logical assignments as expected.

Reproduction

• Repo is here: https://github.com/bleucitron/sk2-transform-bug

• Run

npm i
npm run build
npm run preview

• Search for de||= in the .svelte-kit folder

or

• Open built app in a browser that does not support logical assignment syntax (Firefox 78.15 in my tests, you can find sources here)

• Open the console, and witness the error

Logs

No response

System Info

System:
    OS: macOS 14.1.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 907.93 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.9.0 - /usr/local/bin/pnpm
    bun: 1.0.10 - ~/.bun/bin/bun
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 120.1.61.116
    Chrome: 120.0.6099.216
    Edge: 120.0.2210.133
    Safari: 17.1.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.0
    @sveltejs/kit: ^2.3.3 => 2.3.3
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1
    svelte: ^4.2.7 => 4.2.8
    vite: ^5.0.11 => 5.0.11

Severity

blocking an upgrade

Additional Information

No response

[teemingc]

Note that the vite config target.build option does nothing for SvelteKit. It’s hard-coded on this line

kit/packages/kit/src/exports/vite/index.js

Line 648 in 5dae367

target: ssr ? 'node18.13' : 'es2022'

[dummdidumm]

Related #12

[Conduitry]

What I'm doing right now on a project that I haven't yet upgraded to SK v2 is an inline Vite plugin defining a config callback that goes after the normal sveltekit() plugin. This was necessary because I needed the target configuration to vary between server and client builds, so that I could support older iPhones with Safari 12/13 (which, in particular, did not support the nullish coalescing operator), but so that I could still support top-level await on the server. (More context: #9544)

I briefly tried upgrading to SK v2 and it looks like this is still working, although I don't know what other implications it might have on the features that resulted in that target being hardcoded. I do think that forcing transpilation targets that won't work for people with iPhone that are a few years old isn't a good idea.

[bleucitron]

We have users with Firefox 78.15, in general people with old machines that won't allow modern browser updates. This version is a couple of years old, and our app crashes in their browsers with the upgrade to SK2, which is not reasonable.

We should be able to decide the build target for ourselves.

[benmccann]

v1 did not supply a default target:

kit/packages/kit/src/exports/vite/index.js

Line 573 in 0f71007

target: ssr ? 'node16.14' : undefined

Using undefined in v1 meant that we would use Vite's default and that the user could provide their own value.

It looks like the default of es2022 was added in #11277. @Rich-Harris is es2022 still required since we had to remove the top-level await due to the Apple bug? I'm not sure what feature required the use of es2022, but I'd probably say the nicest fix would go back to undefined if possible so that we have a slightly less aggressive default.

[Rich-Harris]

Ah, interesting — very possibly, yeah. We should try it and see if anything breaks.

Do we want to enforce target for the SSR build still?

[LoremFooBar]

The fix for this issue breaks some prod builds when upgrading from <=2.4.0 to 2.4.1, and top level await is used in modules. See repro here.
This is the output error:

error during build:
Error: Transform failed with 1 error:
_app/immutable/nodes/2.!~{002}~.js:47:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

If you downgrade Sveltekit to 2.4.0, prod build finishes successfully.

[benmccann]

Sorry for the breakage @LoremFooBar. You can fix it by setting build.target to es2022 in your vite.config.js. Note however that Safari has a bug that makes top level awake often not work, so you should test in Safari whether you need to avoid use of that feature.

[LoremFooBar]

Sorry for the breakage @LoremFooBar. You can fix it by setting build.target to es2022 in your vite.config.js. Note however that Safari has a bug that makes top level awake often not work, so you should test in Safari whether you need to avoid use of that feature.

Thanks, do you have any reference for that bug?

[Rich-Harris]

https://bugs.webkit.org/show_bug.cgi?id=242740