Add typescript version of svelte.config.js

[mjljm]

Describe the problem

In the FAQ, it is said I can add a middleware in dev mode by creating a vite plugin.

But my middleware is a typescript file and I cannot import it into my svelte.config.js.

I tried to rename svelte.config.js to svelte.config.ts but got an error "Cannot find module 'C:\Users\JEROME\Documents\MesDeveloppements\SitesInternet\tarteen\svelte.config.cjs'".

Describe the proposed solution

Allow svelte config file to be written in typescript.

Alternatives considered

Don't see any

Importance

would make my life easier

Additional Information

No response

[dummdidumm]

If this was implemented, it would be as part of https://github.com/sveltejs/rfcs/pull/59

[Kapsonfire-DE]

Need to push this - its really an issue

[mjljm]

Thanks for pushing.

Actually I found out this is even more complex than I thought. All that runs in the context of the svelte.config.js file is not "visible" from your code running in the sveltekit context. For instance, if you need to initialize some stuff for your middleware, e.g. a database for the express-session middleware, or a logger, or whatever, there is no way (or I didn't find any) you can pass these initialized variables to your hook.ts. Whatever module you import in svelte.config.js will be loaded and executed again if you import it again in hook.ts.

Furthermore, I also didn't find a way to retrieve in hooks.ts anything sent by a middleware. For instance, the cookie-session middleware will set a req.session object. But I don't see it on the request object I get from the handle function in hooks.ts. I also tried to create a middleware that sets a req.locals.dummy variable. I do get a request.locals in the handle function in hooks.ts but it's empty.

So if you pass middlewares through svelte.config.js, you have two separate codes executing : one in the pre VITE context and another one in the VITE context. And there seems to be no communication between the two.

Finally, the VITE_ENV variables are not available in svelte.config.js (because VITE is not started yet). So you have to load them again (for instance for your database keys,...).

For the moment, I have given up trying. I will try to make do without the usual express middleware.

I think all would be much easier if there were a file called main.js/ts loaded by sveltekit at server start. And the same client side.

Would really appreciate any help.

[dummdidumm]

This does not sound related to wanting TypeScript support for the svelte.config.js. Furthermore, svelte.config.js is reserved for configuring what to run, initialization of middlewares/databases etc should go into hooks.ts, #1538 has more details.

[mjljm]

I don't understand.

How can you initialize a middleware passed in svelte.config.js in hooks.ts? Concretely, how do you use express-session for instance?

Furthermore, what is the goal of running a middleware if you cannot get its result. For instance, if I run the express-session middleware, I want to get my session stuff in hooks.ts. How do I get it?

[dominikg]

Please use discord #svelte-kit to get help. github issues are only used to track feature requests and actual bugs.

[Kapsonfire-DE]

Furthermore, svelte.config.js is reserved for configuring what to run, initialization of middlewares/databases etc should go into hooks.ts, #1538 has more details.

But ehm... there's no way at current state to inject a websocket sever in hook.ts

[mjljm]

@dominikg I am not asking for help. I am reporting that your proposal to use the VITE configureServer hook to use middleware in dev mode does not work. Seems to be the right place for this.

[dummdidumm]

Again, all this has nothing to do with the original issue, so I'm going to mark this conversation as off topic. Please search for related issues, and if you don't find one, open a separate issue detailing your problem and ideally providing a minimum reproducible.

[ecstrema]

Using unconfig would make it quite easy to implement.

[ecstrema]

see #4105

[wobedi]

Workaround:

npm install -D esbuild

And then run the following command before you run svelte-kit build:

"build:svelteconfig": "esbuild svelte.config.ts --outfile=svelte.config.js"

[MajorBreakfast]

In my project I've also the use case of wanting to write a vite plugin in TypeScript. A few weeks back, https://github.com/sveltejs/kit/pull/5332 introduced vite.config.js as a dedicated file at the project root. By using a vite.config.ts instead of js, I'm able to achieve that objective now.

Therefore the original use case described in this issue can be considered served as Vite plugins in TS are now a thing. It might make sense to close this issue and instead reopen #5867 which is more focused and calls explicitly for a svelte.config.ts. This issue here seems to only have called for svelte.config.ts support because until a few weeks ago the svelte config contained the vite config as a nested field. However, the underlying objective was getting TS vite plugins to work - which now work.

[valterkraemer]

Working on a preprocessor written in TypeScript. Cannot import it in svelte.config.js but a hacky workaround for me is importing it in vite.config.ts and make it global, then accessing it in svelte.config.js.

vite.config.ts

import { highlight } from "./src/lib";

(global as any).highlight = highlight;

svelte.config.js

const { highlight } = global;

...

preprocess: [highlight?.(), preprocess()],

[dominikg]

@valterkraemer There are other tools that read svelte.config.js eg. the svelte vscode extension and for them the global would be undefined. You need to either build/bundle your preprocessor to js and import the result in svelte.config.js or use svelte.config.ts combined wih bundling that outputs svelte.config.js.

check out https://github.com/svitejs/svelte-preprocess-svg for an example of how to use tsup to build a svelte preprocessor package from ts source.

[valterkraemer]

Thanks @dominikg, was looking for a good reference implementation for a preprocessor!

The hack works decently because I only call it if it exist (now updated in earlier comment). For sure not ideal, but works good enough for now. Will for sure change it to something better like you suggested if I need something better!

[Spenhouet]

I have extensive data preprocessing for my static webpage which I'm currently executing in svelte.config.js. I'm now trying to transition these to typescript but with svelte.config not being in typescript, this seems to be rather complicated to do. Is there are proper way to do this? Or am I doing it wrong to begin with? For context, the preprocessed data is required to be executed before or with the svelte.config since it creates/defines all required prerender entries. The preprocessing script writes the results to a file which is then read back in, in the svelte.config. So if there is a better way to pre execute typescript files on build, let me know. While I have no other solution, I'm also waiting for a svelte.config.ts support.

[Spenhouet]

Okay, as above suggested, changing the vite config to typescript (vite.config.ts) and then performing the preprocessing scripts from there does work since apparently this is executed earlier. Doing so, I could just change all scripts to typescript and it worked. That is good enough for me.

[AlexRMU]

It would also be nice to rewrite the kit itself on ts (svelte has already been rewritten).

[movahhedi]

Still waiting for this feature.

[Spenhouet]

Not sure if this is on the radar but there might be some hen and egg problems here. At least if one expects features like svelte-kit provided env variables, access to other methods defined in the svelte code, or other functionality one might be used to within the svelte project might not be available on call of svelte.config.ts. Doesn't mean this wouldn't be useful, just that there might be some unexpected missing features.

There is only very little code I actually need to run prior to svelte.config.ts, which is code that provides me information for prerendering pages.

My other use-case is data preprocessing on build. This I did run in svelte.config.js before, than in vite.config.ts and now in hooks.server.ts (https://kit.svelte.dev/docs/hooks) which has all the niceties one expects. Only issue right now is that there is no "only once on build" hook handler: https://github.com/sveltejs/kit/issues/8795

Hope this helps for some use-cases you might have.

[Malix-off]

Apparently it was clear that this is not planned as stated in https://github.com/sveltejs/kit/pull/4031#issuecomment-1049475388

[avarun42]

It seems like the overall goal of being able to support a svelte.config.ts is planned, just not the approach that was used in #4031. Instead the maintainers would like svelte language-tools to be updated first so Typescript can be supported, as described in https://github.com/sveltejs/rfcs/pull/59

[dominikg]

please don't hold your breath on that one. the rfc has been stale for quite a while and having to bundle the config from ts comes with strings attached.

[dominikg]

unconfig does not "just work". it uses something called jiti under the hood and has a lot of complexity. We are not going to subject everyone to that by default.

You may be able to use it from svelte.config.js to load your svelte.config.ts (and whatever complex setup with custom packages you have) yourself.

[maclong9]

Unsure if this has been discussed or whether it's a new implementation, I have discovered success thanks to https://skeleton.dev and their migration guide on using Typescript for configuration files!

import adapter from '@sveltejs/adapter-auto';
import { Config } from '@sveltejs/kit';
import { vitePreprocess } from '@sveltejs/kit/vite';

export default {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    }
} satisfies Config;

[Malix-off]

Using

svelte.config.ts

import type { Config } from '@sveltejs/kit';

export default <Config>{
};

works for me out of the box.

[FlooferLand]

svelte.config.ts seems to work out of the box, but there are a lot of problems that rise when trying to do anything TS-related; it kinda seems like it's trying to interpret the TS file as a JS file. Even when using the Bun runtime (which tends to let JS and TS files import each other like there's no problem), when importing in a TS file inside of my svelte.config.ts I'm getting errors at the start of every .svelte file about "ts" being an unknown file extension in an import on svelte.config.ts. (I haven't been able to get TS imports to work) I haven't tested it with Node, but types work fine inside on Bun, its just importing other TS files thats problematic.

The esbuild workaround doesn't work with imports, as it'd also require me to esbuild the utility TS file i'm using in my config and that's how you end up with a package.json scripts section thats larger in sheer girth than your node_modules directory.

[eltigerchino]

svelte.config.ts does not work. SvelteKit currently ignores the ts config file and uses its default settings instead of throwing an error.

[Jarred-Sumner]

Even when using the Bun runtime (which tends to let JS and TS files import each other like there's no problem), when importing in a TS file inside of my svelte.config.ts I'm getting errors at the start of every .svelte file about "ts" being an unknown file extension in an import on svelte.config.ts.

@FlooferLand if I remember correctly, SvelteKit uses node:vm and/or Rollup on top of Bun which means that it doesn't go through Bun's module loader. So even though Bun supports importing .ts files, SvelteKit is opting out of leveraging Bun's builtin support for that.