Support for SvelteKit #17248
Comments
|
Hi @bartlomieju, thanks for taking a look to support SvelteKit! I work on SvelteKit and wanted to better understand the issue to know if there's anything we're doing wrong on our side. Newer versions of Node provide those APIs out-of-the-box, but older versions don't. SvelteKit polyfills those APIs only when they're not already available.
I know very little about Deno. I'd assume if Deno has those APIs then SvelteKit would not polyfill them, but if it doesn't have those APIs then SvelteKit will probably break if they don't get polyfilled. Does Deno do something differently than Node here such as not adding the APIs to
To clarify, would that adapter live in SvelteKit?
Assuming this is something we'd have to implement on our side, can you clarify what "making specifiers use npm: prefixes" means? |
|
Hi @benmccann, thanks for taking the time.
I haven't seen this bit - from what I saw in the Node adapter these polyfills were installed unconditionally. I assume there must be some check for Node version that causes the polyfills to be installed. Which version would be required? When polyfilling Node APIs we return version
They work the same in Deno as in browsers or with
I think that's a question for you, whether you're interested in providing an official adapter for Deno, I'll be glad to help in any capacity to make it happen :)
Deno has now built-in support for npm - we do that by using Thanks for dropping by and helping with this problem! |
Oops! My bad. That was outdated info. It seems as of sveltejs/kit#7675 that you're correct. It appears we had to do it unconditionally to overwrite the Node-provided version which is an older version of Undici and is broken (sveltejs/kit#7673). Maybe with Node 20 or SvelteKit 2 we'll be able to do something nicer 😄
Ah! I was pointed here by an issue in the SvelteKit repo which talked about the I'm not quite sure what the best fix for the dev mode issue would be. Maybe we could detect node vs deno and only install the polyfills on Node. I'd prefer if there were a nicer way to do this, but maybe it's just temporary until Node 20 / SvelteKit 2 anyway so we can live with it being imperfect. I'll have to check with the other maintainers though |
Thanks for a quick response. That's exactly the problem that I've faced.
A bit quick and dirty, but that would solve the problem at hand and would allow us and Deno users to leverage Svelte with Vite. I'm eager to hear what you decide to do. Let me know if there's anything I can help with to move this issue forward. |
|
Hopefully this is fixed in SvelteKit 1.0.4: https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#104 Thanks for tracking down the issue and sharing enough details to help get it fixed! Let me know if there's anything else to be done on the SvelteKit side. |
Thank for a quick turnaround @benmccann, I can confirm that latest version fixes the problem. I'm gonna keep this issue open for a little longer as we might take approach of supporting SvelteKit running in Vite as-is, without any changes (eg. |
|
I also confirm that updating fixes the issue with running the development server. I've also been trying to integrate svelte-adapter-deno to generate the production build itself for Deno: https://github.com/jpaquim/sveltekit-deno I'm getting this error, though: The file ( |
|
I also had to manually remove the |
It looks like the sk patch was reviewed and merged by rich harris yesterday. sveltejs/kit#8338 What's the process of installing sveltekit in a deno project now? I've ran import { defineConfig } from 'npm:vite@^4.0.0'
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^2.0.0'
import { sveltekit } from 'npm:@sveltejs/kit/vite'
import 'npm:svelte@^3.54.0'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [sveltekit()]
})ran A clarification will be highly appreciated! How would we go about getting a deno-sveltekit template in create-vite-extra? |
Most likely the template needs to be updated - I created these templates about 3 months ago so they might be outdated by now.
If you have used Svelte before and used unversioned import you might get a version from cache. Either use version import or run with
I just opened a PR to |
|
I'm trying to run vite build script but got this error error: Uncaught TypeError: Could not resolve 'file:///Users/anon/deno-sk-uno/.svelte-kit/output/server/index.js' from 'file:///Users/anon/deno-sk-uno/node_modules/.deno/@[email protected]/node_modules/@sveltejs/kit/src/core/prerender/prerender.js'.
Caused by:
could not find npm package for 'file:///Users/anon/deno-sk-uno/.svelte-kit/output/server/index.js'
at async prerender (file:///Users/anon/deno-sk-uno/node_modules/.deno/@[email protected]/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:102:31)
[vite-plugin-sveltekit-compile] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess.<anonymous> (file:///Users/anon/deno-sk-uno/node_modules/.deno/@[email protected]/node_modules/@sveltejs/kit/src/exports/vite/index.js:551:15)
at ChildProcess.emit (https://deno.land/[email protected]/node/_events.mjs:379:28)
at https://deno.land/[email protected]/node/internal/child_process.ts:229:16The issue has occurred on the child process spawned for the pre-render stage... |
|
It appears this will be fixed by future updates to Deno: #17475 |
Reported on Discord by @dominikg |
|
@bartlomieju It is not possible to run the https://github.com/sveltejs/kit/blob/master/packages/kit/src/core/postbuild/prerender.js#L16 |
|
@fernandolguevara @bartlomieju @benmccann It's seems to me (I might be wrong, of course) that since one of Deno's main design goals is providing "A runtime that resembles the web, using browser APIs that work on the server" thus going the web workers APIs way to create an IPC between parent and child process, maybe the SvelteKit team could consider addressing this particularity by branching https://github.com/sveltejs/kit/blob/master/packages/kit/src/utils/fork.js#L14 according to, for example, https://medium.com/deno-the-complete-reference/going-from-node-js-to-deno-part-5-child-process-bde9cd21d3d6 |
|
The reason SvelteKit does prerendering in a subprocess is so that we can call I'm not familiar with web workers, but we would need to be able to call If anyone wants to send a PR, this sounds like something we could accept a PR for in SvelteKit assuming it doesn't massively complicate things. |
|
Could anyone gauge how much effort it would take for say, Svelte and SvelteKit to provide an actual native Deno package? Seems like a huge opportunity? |
As a community member, it's challenging to gauge the effort it would take to provide a native Deno package for Svelte and SvelteKit, and it's better left to SvelteKit or Deno core developers. However, there is some relevant information to consider. Currently, we can use the Svelte compiler module from NPM in Deno, as shown in the example below: import { compile } from "npm:svelte/compiler";
const result = compile("Hello world", {
format: "esm",
filename: "hello-world.svelte",
});
console.log({ result });This allows us to use the Svelte compiler in Deno. However, SvelteKit, the framework, relies on other Svelte language tools that are not fully compatible with Deno, such as the Svelte LSP which is built for the Node.js toolchain. It appears that several Svelte tools would need to be refactored in order to fully support Deno. Therefore, determining the effort required to provide a native Deno package for Svelte and SvelteKit would require closer collaboration between the SvelteKit and Deno core developers. |
I guess you're talking about the For SvelteKit itself, the only thing I'm aware of that's needed is switching the subprocess to a worker as mentioned in #17248 (comment). It's not a priority for the Svelte team as we focus on Svelte 4, but if anyone wants to send a PR I'm happy to advise and we will review it! |
|
I very much hope this moves forward, and soon. By the issues I've been looking Deno and SvelteKit don't know each other very well but having spent a good chunk of time getting to know both I am very confident they would be a match made in heaven... 🤞🏼 |
|
This is an excellent thread. I recently committed all my future frontend work to be done in SvelteKit, having come from a more "traditional" Design > HTML5/CSS > frontend route. SvelteKit works the way I think frontend frameworks should. 😁 Deno is the future for "tidy" front-end web development. Once we throw in WebAssembly and Domain-Specific-Languages like Rust and Python, wrapped in single binary executable, then we will be in business. 😃 |
|
fyi, you can already use deno to run sveltekit applications, it's building that doesn't work currently. |
|
Thank you @dominikg, That is very good to know. I should try this out and report back. Better still, do you have or where can one find a repo with something like you have explained? |
1 similar comment
|
Thank you @dominikg, That is very good to know. I should try this out and report back. Better still, do you have or where can one find a repo with something like you have explained? |
@dominikg do you mind sharing an example dockerfile for the basic svelte starter app? |
|
[email protected] was released to support this |
|
Hi, I'm getting following warning when running SvelteKit project: Here is my project structure: I'm on Svelte 5 btw. |
|
that warning occurs when the generated types in edit: please ask these questions on svelte discord: https://svelte.dev/chat to not spam all the lovely people in this specific issue with unrelated things |
I still seem to be getting issues running sveltekit on Deno.
|
|
The latest SvelteKit is now on |
|
It appears that Deno 2.0 is now a package manager with deno install. If we could get #25342 prioritized that would help us support that functionality in Svelte's CLIs |
Is this being worked on? I have the feeling the solution is to force "every package" to comply with the "node:" or "npm:" specifiers because deno needs it... It simply doesn't feel like "deno can be used as a drop-in replacement for node/bun" as stated in the "deno 2 release video/notes/etc." ... I'm ok with having issues, no probs at all... I like deno a lot, switched completely from nodejs and never looked back I'm used to having issues with a lot of npm packages, been there, done that.... Just don't state node compat if it requires the node ecosystem to change their code... Would it be a temp solution to "just" try assuming without specifiers it's either node: or npm: for the time being? |
|
Any idea how to get sveltekit generated types, modules and path aliases to work with deno LSP in VSCode? The svelte LSP resolves types fine in .svelte files. Deno LSP doesn't check those currently. But all the other .ts files like +page can't resolve deno.json typescript compiler options doesn't yet support To reproduceRun
Open any of the .ts files that use Current workaround is to disable the Deno LSP for the src directory |
Yes, I would also like to know if there is a way to get denols to properly pick up sveltekit generated types. I'm not getting any type safety in these instances at all. |
|
@cam-mcevenue @jakubdonovan At least for $lib, it can be solved by adding a import map to {
// ...
"imports": { "$lib": "./src/lib", "$lib/": "./src/lib/" }
// ...
}I looked at the SvelteKit tsconfig file ( |
|
@jakubdonovan I was able to solve // deno.json or deno.jsonc
{
"imports": {
"$lib": "./src/lib",
"$lib/": "./src/lib/",
"$env/static/public": "./.svelte-kit/ambient.d.ts",
"$env/static/private": "./.svelte-kit/ambient.d.ts",
"$env/dynamic/public": "./.svelte-kit/ambient.d.ts",
"$env/dynamic/private": "./.svelte-kit/ambient.d.ts"
}
}As for For example, in the file Of course it is possible to just list out all of the paths of the SvelteKit app, but I think you can imagine how tedious it would be. @bartlomieju I wonder if the import map support like somehow reading the file path and then substitute it? I imagine something like Finally, for $app stuff, it looks like it maps to // @sveltejs/kit/package.json
{
"exports": {
// ...
"./environment": {
"types": "./src/runtime/app/environment/types.d.ts",
"import": "./src/runtime/app/environment/index.js"
}
}
}and then add the following to the import path "imports": {
// ...
"$app/environment": "npm:@sveltejs/kit/environment",
}for it to work. @benmccann Is there any reason you guys don't export the src/runtime/app/ stuff? |
|
@benmccann Any update on this? |
I could not get the For additional context, I use Deno env imports on the server, not the SvelteKit one's, so I haven't had |
|
Also see sveltejs/cli#214 |
|
Interestingly, the solution provided in the comment above works for env variables, but not for |
|
Not sure if this works already, cause I wasn't able to figure out a proper solution to this. I'm trying to create a barrel file to export specific Svelte Components from a folder, but Deno lint is throwing an error, also Deno is unable to resolve the import/export statements for E.g. Following doesn't work for me, maybe I'm doing something wrong. // src/lib/components/exports.ts
export { default as Component } from "./Component.svelte";Maybe this works: |
Did you found a fix @StevenStavrakis ? |
Only thing that worked for me was creating a tsconfig and doing the import aliasing there. Ultimately, I moved my project off of Deno and onto Bun, but I'm not using any special Bun features so it might as well be on standard node with pnpm at this point. |
|
I have some rough edge with svelte on deno too |
Yep, that's what I did, after about two days of battling issue after issue and no real response from the Deno staff. I really like what they're doing, but unfortunately support is not all there yet. I will try again in 6 months and see how things have changed. |
|
Hey folks sorry for slow response, we got a ton of issues getting opened after the release of Deno 2 and we're trying to tackle them to unblock as many use cases as soon as possible. We understand that you are all excited to use Svelte/SvelteKit with Deno and we have not forgotten about it. We're addressing stuff like #26311 to make it easier to use Svelte with Deno. We also have a few bigger challenges like figuring out how to make auto-generated types work properly as well as how to make Svelte language server and Deno's language server play nicely. I can assure you that we will tackle these things one, by one, so please bear with us. If you hit a specific problem it might be beneficial to help us prioritize if you open a separate issue - it's easy to lose something in this very long thread. Thanks for your patience. |
|
#25342 has just been closed 🚀 |
|
Hey again folks 🖐️
We identified several, distinct problems:
That said, I wanted to test this from scratch, so I did: Which resulted in: Fine, I did: Used default options, as well as a lot of additional dependencies like But when I opened the VSCode and installed Svelte extension (again, starting from scratch), everything seems to work just fine... No red squiggly lines, no resolution errors, no diagnostics.
May I kindly ask you to open separate issues with problems you are running into in your existing projects or new ones that you create? This will greatly help us identify common problems that need to be addressed one-by-one. At this point this issue is a catch-all and makes it hard to figure out what are the pitfalls you are running into :( Thanks again! EDIT: Oooops, my bad. All is good in So the list I provided above is actually correct. |
For those brave souls seeking to harness the untamed power of the {
"imports": {
"$lib": "./src/lib",
"$lib/": "./src/lib/",
"$env/static/public": "./.svelte-kit/ambient.d.ts",
"$env/static/private": "./.svelte-kit/ambient.d.ts",
"$env/dynamic/public": "./.svelte-kit/ambient.d.ts",
"$env/dynamic/private": "./.svelte-kit/ambient.d.ts",
"$app/forms": "../../node_modules/@sveltejs/kit/types/index.d.ts",
"$app/environment": "../../node_modules/@sveltejs/kit/types/index.d.ts",
"$app/navigation": "../../node_modules/@sveltejs/kit/types/index.d.ts",
"$app/server": "../../node_modules/@sveltejs/kit/types/index.d.ts",
"$app/stores": "../../node_modules/@sveltejs/kit/types/index.d.ts"
}
}But heed this warning, intrepid coder: The |
and others
Prompted by discussion on Discord I tried to get SvelteKit working in Deno.
After an hour of debugging I found the main blocker: by default SvelteKit installed Node adapter, which does a bit of setup that is not needed in Deno and makes the project crash, namely:
https://github.com/sveltejs/kit/blob/e7bc0be2b25aff5ac151e3d83b771ad80cac1ab8/packages/kit/src/exports/node/polyfills.js#L6-L28
which installs polyfills from
undicifor various Web APIs likefetchorResponse. These objects work slightly differently in Deno and arguably installing them in Deno is not needed.I think the way forward would be to get a Deno dedicated adapter that would essentially be a noop as there's no need to change anything to make SvelteKit work.
Of course it would be very nice if
deno run -A npm:create-svelte@latestwould set up a project in a way that requires no changes (namely making specifiers usenpm:prefixes).The text was updated successfully, but these errors were encountered: