Cannot build SvelteKit app with @vitejs/plugin-legacy

[nicomouss]

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

[benmccann]

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

[nicomouss]

@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.

[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

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')

[benmccann]

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

[benmccann]

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

[nicomouss]

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).

[benmccann]

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 😟

[nicomouss]

@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

[dimavolo]

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.

[perqa]

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.

[benmccann]

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

[aslak01]

@nicomouss Did you find a workaround for this?

[StevenStavrakis]

Any updates on this?