Support for SvelteKit

[bartlomieju]

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 undici for various Web APIs like fetch or Response. 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@latest would set up a project in a way that requires no changes (namely making specifiers use npm: prefixes).

[benmccann]

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.

These objects work slightly differently in Deno and arguably installing them in Deno is not needed.

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 globalThis? How should users utilize the APIs in this case?

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.

To clarify, would that adapter live in SvelteKit?

Of course it would be very nice if deno run -A npm:create-svelte@latest would set up a project in a way that requires no changes (namely making specifiers use npm: prefixes).

Assuming this is something we'd have to implement on our side, can you clarify what "making specifiers use npm: prefixes" means?

[bartlomieju]

Hi @benmccann, thanks for taking the time.

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 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 v18.12.1 (latest LTS Node.js version).

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 globalThis? How should users utilize the APIs in this case?

They work the same in Deno as in browsers or with undici, they are present on globalThis. They work the same for all intents and purposes for end-users, but internally they are implemented differently than in browsers or undici and some of our APIs break when certain non-public fields are not present. This becomes non-issue if the polyfills are not installed.

To clarify, would that adapter live in SvelteKit?

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

Assuming this is something we'd have to implement on our side, can you clarify what "making specifiers use npm: prefixes" means?

Deno has now built-in support for npm - we do that by using npm: specifiers - more info on that here: https://deno.land/manual@v1.29.1/node/npm_specifiers. Long story, short: we currently don't rely (or actually use at all) package.json file to figure out dependencies needed, but instead look at all imports with npm: specifiers to pull relevant packages (and then recursively analyzing them). What I meant by that comment was that it would be nice if Svelte's generator would for example put import svelte from "npm:svelte" instead of import svelte from "svelte" when it sees it's being run in Deno (eg. by checking for typeof globalThis.Deno !== "undefined". Though I think it's a secondary issue at this point - we already added custom templates to https://github.com/bluwy/create-vite-extra that take care of that and we're debating internally if we should support package.json in user code.

Thanks for dropping by and helping with this problem!

[benmccann]

these polyfills were installed unconditionally

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 😄

from what I saw in the Node adapter

Ah! I was pointed here by an issue in the SvelteKit repo which talked about the dev command, which I guess was broken by the fact that we now polyfill unconditionally. The adapters are only run with the build command. The node adapter was really only meant for Node.js, but we do have a Deno adapter that a community member developed and I'm assuming this issue would not be present there: https://github.com/pluvial/svelte-adapter-deno.

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

[bartlomieju]

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 😄

Thanks for a quick response. That's exactly the problem that I've faced.

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

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.

[benmccann]

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.

[bartlomieju]

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. npm: specifiers).

[jpaquim]

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:

error: Uncaught TypeError: Could not resolve 'file:///Users/<user>/sveltekit-deno/.svelte-kit/output/server/index.js' from 'file:///Users/<user>/sveltekit-deno/node_modules/.deno/@sveltejs+kit@1.0.5/node_modules/@sveltejs/kit/src/core/prerender/prerender.js'.
  Caused by:
    could not find npm package for 'file:///Users/<user>/sveltekit-deno/.svelte-kit/output/server/index.js'
    at async prerender (file:///Users/<user>/sveltekit-deno/node_modules/.deno/@sveltejs+kit@1.0.5/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:100:31)
[vite-plugin-sveltekit-compile] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///Users/<user>/sveltekit-deno/node_modules/.deno/@sveltejs+kit@1.0.5/node_modules/@sveltejs/kit/src/exports/vite/index.js:551:15)
    at ChildProcess.emit (https://deno.land/std@0.171.0/node/_events.mjs:379:28)
    at https://deno.land/std@0.171.0/node/internal/child_process.ts:229:16

The file (.svelte-kit/output/server/index.js) is generated correctly, but for some reason importing it seems to be failing, maybe due to the way the dynamic import is being built here? https://github.com/sveltejs/kit/blob/master/packages/kit/src/core/prerender/prerender.js#L100

[jpaquim]

I also had to manually remove the @neoconfetti/svelte import as it wasn't working even with the npm: specifier. Same thing with the @import '@fontsource/fira-mono' in styles.css, commented out for now.

[jakubdonovan]

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. npm: specifiers).

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 deno run -A npm:create-vite-extra and selected the deno-svelte template with typescript and then went to vite.config.mts and replaced the svelte plugin with sveltekit like so

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 deno task dev and still got the pesky undefined body error. When looking through my deno.lock, I noticed that the pre-patched version of sveltekit (1.0.1) was imported and that my file structure has things missing (app.html, the routes folder, no +page.svelte) etc

A clarification will be highly appreciated! How would we go about getting a deno-sveltekit template in create-vite-extra?

[bartlomieju]

What's the process of installing sveltekit in a deno project now? I've ran deno run -A npm:create-vite-extra and selected the deno-svelte template with typescript and then went to vite.config.mts and replaced the svelte plugin with sveltekit like so

Most likely the template needs to be updated - I created these templates about 3 months ago so they might be outdated by now.

ran deno task dev and still got the pesky undefined body error. When looking through my deno.lock, I noticed that the pre-patched version of sveltekit (1.0.1) was imported and that my file structure has things missing (app.html, the routes folder, no +page.svelte) etc

If you have used Svelte before and used unversioned import you might get a version from cache. Either use version import or run with --reload to force Deno to pull latest version.

A clarification will be highly appreciated! How would we go about getting a deno-sveltekit template in create-vite-extra?

I just opened a PR to create-vite-extra that essentially copy-pasted existing templates and adjusted them to be Deno compatible (by changing imports to use npm: specifiers and list all dependencies in vite.config.mts.

[fernandolguevara]

I'm trying to run vite build script
deno run -A --unstable --node-modules-dir npm:vite build
on a deno + sveltekit + unocss project

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/@sveltejs+kit@1.0.10/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/@sveltejs+kit@1.0.10/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/@sveltejs+kit@1.0.10/node_modules/@sveltejs/kit/src/exports/vite/index.js:551:15)
    at ChildProcess.emit (https://deno.land/std@0.173.0/node/_events.mjs:379:28)
    at https://deno.land/std@0.173.0/node/internal/child_process.ts:229:16

The issue has occurred on the child process spawned for the pre-render stage...
the generated files on output/*.js don't follow deno import syntaxt for npm packages