Cannot build SvelteKit app with @vitejs/plugin-legacy

Describe the bug

In case some Vite plugins are set in the config, command npm run build fails using latest SvelteKit version, whereas it was not failing using older versions.

Reproduction

npx degit https://github.com/nicomouss/sveltekit-build-fail.git sveltekit-build-fail
cd sveltekit-build-fail
npm install
npm run build

This successfully builds a basic SvelteKit skeleton app (with a Vite plugin added to its build config) based on a previous version of SvelteKit. You can check the libraries in use by running npm list --depth=0, this should displays the following (= the setup you would have gotten by creating a SvelteKit app a couple weeks ago, like I did back then):

├── @sveltejs/adapter-static@1.0.0-next.22
├── @sveltejs/kit@1.0.0-next.201
├── @vitejs/plugin-legacy@1.6.4
├── svelte@3.44.2

Now let's upgrade our app to the latest version of SvelteKit (= the setup you would get by creating a SvelteKit app as for now):

npm i -D @sveltejs/kit@1.0.0-next.218
npm i -D svelte@3.45.0
npm i -D @sveltejs/adapter-static@1.0.0-next.24

Then run npm run build.

The build now fails with the following exception:

> Cannot read property 'filter' of undefined

Thus upgrading to latest SvelteKit version can break the build of an app.

In this case, there seems to be a side effect regarding Vite plugins. Because if you open svelte.config.js and change it from this:

vite: {
	plugins: [
           legacy({
		targets: ['defaults', 'not IE 11']
	   })
	]
}

to this:

vite: {
	plugins: []
}

Then the build works successfully again. Only you loose the plugin you have been successfully using till now...

Logs

No response

System Info

Latest published SvelteKit librairies

Severity

annoyance

Additional Information

No response

I can't reproduce this.

Note that I ran rm -rf node_modules package-lock.json instead of:

npm i -D @sveltejs/kit@1.0.0-next.218
npm i -D svelte@3.45.0
npm i -D @sveltejs/adapter-static@1.0.0-next.24

@benmccann

@benmccann, you are not reproducing the bug because by running rm -rf node_modules package-lock.json then npm install, you are in effect back to what is working with the older SvelteKit libs

Note that in order to initially install the older SvelteKit libs to create my example repo, I had set the dependencies like so in the package.json:

"devDependencies": {
    "@sveltejs/adapter-static": "1.0.0-next.22",
    "@sveltejs/kit": "1.0.0-next.201",
    "@vitejs/plugin-legacy": "1.6.4",
    "svelte": "3.44.2"
  }

I have updated package.json with the leading ^ characters, so now the default package-lock.json will install the older SvelteKit when you first run npm install, and package.json will then install the lastest SvelteKit if you run rm -rf node_modules package-lock.json and npm install

So you can run this below like you did, and you'll now reproduce the error:

npx degit https://github.com/nicomouss/sveltekit-build-fail.git sveltekit-build-fail
cd sveltekit-build-fail
npm install
npm run build     => This build works - using older SvelteKit libs
rm -rf node_modules package-lock.json
npm install
npm run build     => This build fails - using latest SvelteKit libs

Thanks.

Ah, ok. Sorry about that. I'm not used to packages being pinned in package.json. Next time I'd say go ahead and just start out with the broken code checked in. It's also a bit weird to use npx degit in the repro instructions

Anyway, it's reproducing now and I can see the exception being thrown from this line:

kit/packages/kit/src/core/build/utils.js

Line 8 in ecb423b

output.filter((output) => output.type === 'chunk')

The issue appears to be that SvelteKit assumes Vite will return a single object, but @vitejs/plugin-legacy changes it to be an array:

https://github.com/vitejs/vite/blob/8fb854fd62f0edc9b1d1bab79b7d9b11cd03cf90/packages/plugin-legacy/index.js#L230

It's not really clear to me how we would easily make this work. I think this is part of a larger effort supporting legacy builds, so I close this as a duplicate of #12

@benmccann

Ah, ok. Sorry about that. I'm not used to packages being pinned in package.json. Next time I'd say go ahead and just start out with the broken code checked in. It's also a bit weird to use npx degit in the repro instructions

Sure, thanks for you feedback @benmccann and the time to dive into the issue.

Actually I wrote the reproduction procedure that way to show that the build error only appears when I upgrade to latest SvelteKit. Note that the @vitejs/plugin-legacy does not change (@vitejs/plugin-legacy@1.6.4) in-between the successful build and the failing one.

So it might be something related to SvelteKit I guess, as only SvelteKit libs have changed when the build is failing... See below by using npm list --depth=0 to check what is installed, you can see that @vitejs/plugin-legacy does not change but the build fails nonetheless:

npx degit https://github.com/nicomouss/sveltekit-build-fail.git sveltekit-build-fail
cd sveltekit-build-fail
npm install
npm list --depth=0     => Will display ├── @vitejs/plugin-legacy@1.6.4
npm run build     => This build works - using older SvelteKit libs
rm -rf node_modules package-lock.json
npm install
npm list --depth=0     => Will display ├── @vitejs/plugin-legacy@1.6.4
npm run build     => This build fails - using latest SvelteKit libs

Maybe I am missing something along the way here, though.
Thanks for the exchange and feedback.

Btw I am using @vitejs/plugin-legacy to generate legacy chunks along the ones generated by default by Vite. I am trying to write a custom adapter-static-legacy that could generate proper HTML targeting those chunks, which would enable support of legacy browsers for statically-built SvelteKit apps (before full legacy support is implemented, as in #12).

It would have likely broken as a result of #2931. I'm afraid that's a rather large change and it's not immediately clear to me how you'd make @vitejs/plugin-legacy work again. Sorry for the breakage 😟

@benmccann

@benmccann sure no prob, thank you for your quick feedbacks.

I'll thus try to come up with new ideas to create legacy builds for static apps. Probably by re-processing the output folder coming out from adapter-static, to turn it legacy-browsers-friendly.

Will post about it if I ever come up with something successful.

Cheers

@benmccann

Same problem here. As @benmccann pointed out, the issue is await vite.build(config) returns an array, not a single object. SvelteKit is trying to destructure {output} from [ { output: [Array] }, { output: [Array] } ] }.

My goal is to support legacy Safari on iPhone 4s.

Should this ticket be closed if the issue isn't fixed? Are there any other ways to support legacy browsers with Sveltekit? If not, this is a blocker for me.

As I said when this was closed, we already have an issue to track this. Please follow #12

legacy bundler/svelte is broken, see github issue:

@nicomouss

@nicomouss Did you find a workaround for this?

Any updates on this?

have anyone found the solution?

@aslak01

@aslak01 @StevenStavrakis @cyanerd There isn't really any good stuff at the moment providing an out-of-the-box solution to this problem.

Someone had submitted a PR related to this, but it has been rejected due to introducing unwanted complexity to the sveltekit codebase. See this: #6265 (comment).

I'd say if you need to target a specific browser or environment, your best bet is to post-process the output of your build process, to turn it into a legacy-friendly build.

You can have a look at tvkit project which can give some idea on how to post-process things, out of a sveltekit build: https://github.com/bfanger/tvkit?tab=readme-ov-file#usage-build

Note: tvkit does not work with new versions of sveltekit, but you can use its phylosophy and ideas to come up with your own implementation/fork.

If you choose to go down this path, I'd also suggest to invest much time in unit-testing your post-process implementation, as any new version of svelte/sveltekit might break it (new version of sveltekit = potentially new js code outputted when you build your app = potentially a breaking change for your post-process implementation).

Hope this helps.

Navigation Menu

Repository navigation

Cannot build SvelteKit app with `@vitejs/plugin-legacy` #3247

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cannot build SvelteKit app with @vitejs/plugin-legacy #3247

Description

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

Activity

benmccann commented on Jan 9, 2022

nicomouss commented on Jan 9, 2022

benmccann commented on Jan 9, 2022

benmccann commented on Jan 9, 2022

benmccann commented on Jan 9, 2022

nicomouss commented on Jan 9, 2022

benmccann commented on Jan 9, 2022

nicomouss commented on Jan 10, 2022

dimavolo commented on Feb 3, 2022

perqa commented on Feb 8, 2022

benmccann commented on Feb 8, 2022

aslak01 commented on Oct 8, 2023

StevenStavrakis commented on Jan 3, 2024

cyanerd commented on Oct 13, 2025

nicomouss commented on Oct 16, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Cannot build SvelteKit app with `@vitejs/plugin-legacy` #3247