kit
kit copied to clipboard
sveltejs
Differential legacy builds
Snowpack treats the idea of optimizing / configuring your build like so:
- By default,
snowpack buildcreates an unoptimized, unbundled, fully modern (ES2020) site build for you. - "optimize" plugins can be added to your config that take this build directory, and optimize it in some way.
- ex:
@snowpack/plugin-webpackwill bundle your site for you, using some set of recommended best practices - you can stack multiple optimize plugins (ex:
@snowpack/plugin-webpack+ a plugin that now gets the bundled build directory, and adds custom preload link elements or something)
- ex:
- We have an open issue to build some common optimizations into Snowpack via the
optimizeconfig- These would run before "optimize" plugins, but could still work with them
- issue: https://github.com/pikapkg/snowpack/issues/1276
From looking at the codebase (and talking to @Rich-Harris) y'all follow this pattern by running the final build through Rollup, however you run it yourself out-of-band after the build has completed. This is fine for now, and you would add differential build support by just extending the Rollup config that you already have set up.
From our perspective, we'd obviously love to see you leveraging Snowpack's plugin ecosystem more here. I'd be curious what it would take to move your custom Rollup optimize pipeline into a Snowpack plugin that others could take advantage of. Currently, we're looking at https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle as the best candidate to become our "official" Rollup plugin.
Unverified assumption: https://github.com/vitejs/vite/tree/main/packages/plugin-legacy might help here.
If legacy support is added it will likely add security vulnerabilities.
Which is fine... if legacy is opt-in only the user should be warned that it could be dangerous. The thing to watch out for is that these vulnerabilities are not exposed to the non-legacy / default setup.
This has come up in a few tickets in Sapper and most recently here: https://github.com/sveltejs/sapper/pull/1760
Relates to https://github.com/sveltejs/kit/issues/93
I have not doubt this is a pain, but I am very glad that it is being considered though. These legacy platforms are no fun, but they are still often a reality. Thank y'all for all of the hard work on this project. It really is great!
+1 @johngrasty
(I have used a solution based on Antony Jones’ repository (antony/sapper-ie) for IE11 support with Sapper and was quite happy I got it working rather automatically.
If you work on projects for or visited by public institutions in Germany, there are chances that these visitors are using an old, restricted Windows machine. 😢)
Is there any update or plan for this? This is a deal breaker for me and preventing me from migrating over from sapper because I need to target a platform that does not support native ESM. I tried using @vitejs/plugin-legacy but it doesn't seem to play nice with SvelteKit (maybe because of SSR?)
I was able to get @vitejs/plugin-legacy configured and outputting legacy chunks properly, but the <script nomodule> tag doesn’t appear to be getting passed through to the resulting html from @sveltejs/adapter-netlify. Are there any ways at all to accomplish this currently? I really need to be able to provide legacy support, and haven’t been able to find any concrete information about how to do it.
I was able to get
@vitejs/plugin-legacyconfigured and outputting legacy chunks properly, but the<script nomodule>tag doesn’t appear to be getting passed through to the resulting html from@sveltejs/adapter-netlify. Are there any ways at all to accomplish this currently? I really need to be able to provide legacy support, and haven’t been able to find any concrete information about how to do it.
I've managed to make it work in IE11 with @vitejs/plugin-legacy and staticAdapter by adding necessary polyfills by hand ('custom-event-polyfill' , 'core-js/modules/es.promise.js', 'regenerator-runtime/runtime') but the biggest problem is that you will need to add some code to each html file with legacy build scripts, like this
<script nomodule="" src="/_app/assets/polyfills-legacy.[hash].js"></script>
<script nomodule="">
System.import("/_app/start-legacy-[hash].js").then(function(mod) {
mod.start({ // all options was taken from code generated by sveltekit in type="module" script
target: document.querySelector("#svelte"),
paths: {"base":"","assets":""},
session: {},
host: location.host,
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [
System.import("/_app/layout.svelte-legacy-[hash].js"), // "import" call changed to System.import in order to work in old browsers
System.import("/_app/pages/about.svelte-legacy-[hash]js")
],
page: {
host: location.host, // TODO this is redundant
path: "\u002Fabout",
query: new URLSearchParams(""),
params: {}
}
}
});
})
</script>
I was trying to understand how to make sveltekit generate such a code to be added to %svelte.body% but didn't make it. Will try to look at this in near future, if I will have time. Hope it will help someone in future investigations)
Update: I've managed to monkey-patch (under monkey-patching I mean that I just added some functions and data here and there and it just works) build_server and render_response functions in order to provide needed data for template and build sites with adapter-static and adapter-node which could be opened with IE11 and it worked. Don't know if I could provide a proper pull request for this, to be honest
@smertelny I've been working on something similar and was falling at the last hurdle (i.e. calling the client start function successfully in legacy browsers). I'd love to see what you've done if you were able to put it in a repo somewhere and I might be willing to take a PR on.
Hello, Are there any updates on this issue? Is anyone working on a solution? There is this PR, but it has not been merged: https://github.com/sveltejs/kit/pull/2745
Has anyone solved the problem of using @vitejs/plugin-legacy in svelte-kit?
I am getting the following error on build:
> [email protected] build D:\projects\-temp\svelte-kit\svelte-kit-template
> vite build
vite v2.9.13 building for production...
✓ 13 modules transformed.
[vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\-temp\svelte-kit\svelte-kit-template\.svelte-kit/output/client/_app/manifest.json'
Process finished with exit code 0
The build folder does not appear.
And it also confuses me: Process finished with exit code 0 as if everything is fine
See my repo to reproduce it:
https://github.com/NikolayMakhonin/svelte-kit-template/tree/vite-legacy-issue
(it is clean app created with npm create svelte)
Sorry to jump in here. I believe spectrum.net is using SvelteKit, and that is causing trouble for Pale Moon users. See here: https://forum.palemoon.org/viewtopic.php?f=70&t=28403&p=230430#p230430
I'm sorry if this is not the place to discuss this. Maybe this belongs somewhere else?
@BenFenner this is not a support forum for a commercial website.
please contact the owners/support for that site.
ps.
Looking at htxtps://www.spectrum.net i see ng-version="13.2.6" attributes which are a strong hint for angular.
@NikolayMakhonin same thing in clean latest version of sveltekit with this plugin (vitejs/plugin-legacy) but with errors :
> [email protected] build
> vite build
vite v3.0.2 building for production...
✓ 34 modules transformed.
[vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json'
error during build:
Error: ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json'
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at client_build_info (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:2921:16)
at Object.writeBundle (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:3062:19)
at file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:22694:37
at async Promise.all (index 0)
at async file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23717:13
at async catchUnfinishedHookActions (file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23040:20)
at async doBuild (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43468:26)
at async build (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43297:16)
and strange, double slash in the file path client//manifest.json
my package-lock.json:
"@sveltejs/kit": {
"version": "1.0.0-next.382",
...
},
"@sveltejs/vite-plugin-svelte": {
"version": "1.0.1",
...
},
"vite": {
"version": "3.0.2",
...
},
"@vitejs/plugin-legacy": {
"version": "2.0.0",
...
}
while the plugin returns js files
without the plugin returns all files (js, assets directory: css, woff, woff2, svg, and manifest.json)
sorry i'm using a translator
I am facing the same issue. Tried with vite 2.x and 3.x but same issue persists. Hope that this get's fixed because support for legacy browsers can be blocker for many projects.
@NikolayMakhonin same thing in clean latest version of sveltekit with this plugin (vitejs/plugin-legacy) but with errors :
> [email protected] build > vite build vite v3.0.2 building for production... ✓ 34 modules transformed. [vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' error during build: Error: ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' at Object.openSync (node:fs:585:3) at Object.readFileSync (node:fs:453:35) at client_build_info (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:2921:16) at Object.writeBundle (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:3062:19) at file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:22694:37 at async Promise.all (index 0) at async file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23717:13 at async catchUnfinishedHookActions (file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23040:20) at async doBuild (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43468:26) at async build (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43297:16)and strange, double slash in the file path client//manifest.json
my package-lock.json:
"@sveltejs/kit": { "version": "1.0.0-next.382", ... }, "@sveltejs/vite-plugin-svelte": { "version": "1.0.1", ... }, "vite": { "version": "3.0.2", ... }, "@vitejs/plugin-legacy": { "version": "2.0.0", ... }while the plugin returns js files
without the plugin returns all files (js, assets directory: css, woff, woff2, svg, and manifest.json)
sorry i'm using a translator
I can confirm I have the same error, the path is malformed there after using the legacy plugin.
Finally I had some time to look into it (again). The path with two slashes (//) is working (somehow) and is not causing any troubles, because this path is same when building without plugin-legacy. The problem is that "manifest.json" is not formed by vite while using plugin-legacy at the moment sveltkit's vite plugin is trying to read it.
But there is another problem for implementing legacy build and it is a module that is inlined into page with start and set_public_env function in it. Is there anything that stops us from extracting it into it's own file and extracting data needed for hydration into some script tag with application/json type in order not to trigger CSP?
@NikolayMakhonin same thing in clean latest version of sveltekit with this plugin (vitejs/plugin-legacy) but with errors :
> [email protected] build > vite build vite v3.0.2 building for production... ✓ 34 modules transformed. [vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' error during build: Error: ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' at Object.openSync (node:fs:585:3) at Object.readFileSync (node:fs:453:35) at client_build_info (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:2921:16) at Object.writeBundle (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:3062:19) at file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:22694:37 at async Promise.all (index 0) at async file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23717:13 at async catchUnfinishedHookActions (file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23040:20) at async doBuild (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43468:26) at async build (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43297:16)
We need this fixed same thing is happening to me too, no manifest.json for client is created only for server.
Looks like this issue is tagged as post-1.0. Since it is the one issue which blocks me (and others) from using Sveltekit in projects, I would like to suggest to move it to 1.0 tag, like it used to be. @Rich-Harris ? Is it definitely out of scope?
Sveltekit is a great candidate when developing apps for low-performant devices, since it is less demanding in runtime than most other frameworks. However, those low-performant devices usually require legacy support, and that's the blocker.
@NikolayMakhonin same thing in clean latest version of sveltekit with this plugin (vitejs/plugin-legacy) but with errors :
> [email protected] build > vite build vite v3.0.2 building for production... ✓ 34 modules transformed. [vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' error during build: Error: ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' at Object.openSync (node:fs:585:3) at Object.readFileSync (node:fs:453:35) at client_build_info (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:2921:16) at Object.writeBundle (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:3062:19) at file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:22694:37 at async Promise.all (index 0) at async file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23717:13 at async catchUnfinishedHookActions (file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23040:20) at async doBuild (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43468:26) at async build (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43297:16)and strange, double slash in the file path client//manifest.json
my package-lock.json:
"@sveltejs/kit": { "version": "1.0.0-next.382", ... }, "@sveltejs/vite-plugin-svelte": { "version": "1.0.1", ... }, "vite": { "version": "3.0.2", ... }, "@vitejs/plugin-legacy": { "version": "2.0.0", ... }while the plugin returns js files
without the plugin returns all files (js, assets directory: css, woff, woff2, svg, and manifest.json)
sorry i'm using a translator
Finally I had some time to look into it (again). The path with two slashes (//) is working (somehow) and is not causing any troubles, because this path is same when building without plugin-legacy. The problem is that "manifest.json" is not formed by vite while using plugin-legacy at the moment sveltkit's vite plugin is trying to read it.
But there is another problem for implementing legacy build and it is a module that is inlined into page with start and set_public_env function in it. Is there anything that stops us from extracting it into it's own file and extracting data needed for hydration into some script tag with application/json type in order not to trigger CSP?
@NikolayMakhonin same thing in clean latest version of sveltekit with this plugin (vitejs/plugin-legacy) but with errors :
> [email protected] build > vite build vite v3.0.2 building for production... ✓ 34 modules transformed. [vite-plugin-svelte-kit] ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' error during build: Error: ENOENT: no such file or directory, open 'D:\projects\my-app\.svelte-kit/output/client//manifest.json' at Object.openSync (node:fs:585:3) at Object.readFileSync (node:fs:453:35) at client_build_info (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:2921:16) at Object.writeBundle (file:///D:/projects/my-app/node_modules/@sveltejs/kit/dist/vite.js:3062:19) at file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:22694:37 at async Promise.all (index 0) at async file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23717:13 at async catchUnfinishedHookActions (file:///D:/projects/my-app/node_modules/rollup/dist/es/shared/rollup.js:23040:20) at async doBuild (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43468:26) at async build (file:///D:/projects/my-app/node_modules/vite/dist/node/chunks/dep-1513d487.js:43297:16)We need this fixed same thing is happening to me too, no
manifest.jsonfor client is created only for server.
I'm glad to announce that I had managed to fix this problem on my fork (which is a continuation of PR #2745 by @smertelny).
The reason for the manifest problem is that Vite generates the manifest only after all Rollup build outputs end, as we can see in the internal Vite manifest plugin, in the generateBundle stage:
https://github.com/vitejs/vite/blob/81989bfb32bee3138f406350d518c53b1683919e/packages/vite/src/node/plugins/manifest.ts#L125-L137
Vite-Legacy plugin modifies Rollup output to be an array in size of at least two, one for the legacy version and the other targets for the original: https://github.com/vitejs/vite/blob/31c2926c681f33552afee8b5e3f5d1f3fc52d069/packages/plugin-legacy/src/index.ts#L307-L314
So in a similar fashion to the internal manifest plugin, I had modified the writeBundle stage in kit plugin, to be processed only after all Rollup build output had been done (since it is called after every output that is done), and now it receives the manifest file:
https://github.com/Tal500/kit/blob/365fc7c20ae2ec365efef204489fbfc204fc15b1/packages/kit/src/vite/index.js#L334-L341
This took me so much time to investigate, I had to make my own version of the vite-legacy and the manifest plugin until I had found this logic. (Why does Vite documentation can't be better and in more details???) Now the legacy files generation works well! Basically, now the only thing that is left to my fork is to generate correctly the HTML JS legacy imports and the "nomodule" fixes, and then SvelteKit legacy support could work well! (Need also to clean my code, but who cares :-) )
Looks like this issue is tagged as post-1.0. Since it is the one issue which blocks me (and others) from using Sveltekit in projects, I would like to suggest to move it to 1.0 tag, like it used to be. @Rich-Harris ? Is it definitely out of scope?
Sveltekit is a great candidate when developing apps for low-performant devices, since it is less demanding in runtime than most other frameworks. However, those low-performant devices usually require legacy support, and that's the blocker.
I totally agree. I saw many features that are important for this project, like internalization, but not legacy. Although internalization is way more important, legacy is much more urgent since the former can be solved by external libraries of Svelte (which already exists), but the latter must be solved internally in the library, since it's a core issue in the system.
I think that beside the time for implementation, Rich is concerned about the stability of the API for 1.0.
For fixing Rich's concerns, I suggest to have in SvelteKit configuration some section of "experimental features"(i.e. kit.experimental), which are not promised to work, and their API can be changed all the time. This is common in many framework.
If the legacy feature will be pushed too close to the release, it can be marked as experimental.
I'm glad to share my work - PR #6265, solving this issue.
Please test locally in your legacy browsers and share your experience, I have only tested it on IE11.
@vitejs/plugin-legacy was updated to 2.0.1
Yes, the demos on my PR https://github.com/sveltejs/kit/pull/6265 are using it! Thought I'm not sure the update made a difference.
Any updates? Using latest sveltekit with node-adapter with 3.0.1 legacy plugin and still get this error, that vite_manifest.json is not found in .svelte-kit/output/server/vite-manifest.json
[vite-plugin-sveltekit-compile] ENOENT: no such file or directory, open '<proj path>.svelte-kit/output/client/vite-manifest.json' error during build: Error: ENOENT: no such file or directory, open '<proj path>.svelte-kit/output/client/vite-manifest.json' at Object.openSync (node:fs:594:3) at Object.readFileSync (node:fs:462:35) at client_build_info (file://<proj path>node_modules/@sveltejs/kit/src/exports/vite/index.js:189:7) at Object.handler (file://<proj path>node_modules/@sveltejs/kit/src/exports/vite/index.js:501:20) at file://<proj path>node_modules/rollup/dist/es/shared/rollup.js:23660:40 at async PluginDriver.hookParallel (file://<proj path>node_modules/rollup/dist/es/shared/rollup.js:23582:17) at async file://<proj path>node_modules/rollup/dist/es/shared/rollup.js:24990:13 at async catchUnfinishedHookActions (file://<proj path>node_modules/rollup/dist/es/shared/rollup.js:24022:20) at async doBuild (file://<proj path>node_modules/vite/dist/node/chunks/dep-5e7f419b.js:44518:22) at async build (file://<proj path>node_modules/vite/dist/node/chunks/dep-5e7f419b.js:44347:16) at async CAC.<anonymous> (file://<proj path>node_modules/vite/dist/node/cli.js:808:9)
If you work on projects for or visited by public institutions in Germany, there are chances that these visitors are using an old, restricted Windows machine. 😢)
@silllli this is exactly my problem. I fear the browser and Windows version are not the real problem. They probably use a white list. Complex JavaScript apps like Google Maps work, but the Svelte test-page (even the legacy test-page) do not work.
Have you found a workaround?
If you work on projects for or visited by public institutions in Germany, there are chances that these visitors are using an old, restricted Windows machine. 😢)
@silllli this is exactly my problem. I fear the browser and Windows version are not the real problem. They probably use a white list. Complex JavaScript apps like Google Maps work, but the Svelte test-page (even the legacy test-page) do not work.
Have you found a workaround?
I still use Sapper 🥲
If you work on projects for or visited by public institutions in Germany, there are chances that these visitors are using an old, restricted Windows machine. 😢)
@silllli this is exactly my problem. I fear the browser and Windows version are not the real problem. They probably use a white list. Complex JavaScript apps like Google Maps work, but the Svelte test-page (even the legacy test-page) do not work. Have you found a workaround?
I still use Sapper 🥲
I was also like this, until I have become more aggressive, so I created my own PR #6265 and maintain my own fork of SvelteKit. Please tell me if this PR and the demo have a nice DX for you. It still requires the browser version to be at least IE11 or something similar though, can't pass through this limit.
@Rich-Harris please take a look at the PR #6265 from @Tal500 we need this feature in SvelteKit 👍
It still requires the browser version to be at least IE11 or something similar though, can't pass through this limit.
for me is more than enough, as what i need to support are chrome 49 and opera 32 versions, because of deployed fleets of tvs that included that versions, well, deployed and even new tvs came with that browser versions, so your fork has been a nice thing to start migrating from sapper version.
There's something that we can do to help integrate this fork more easily in the main branch?
