Add typescript version of svelte.config.js

[parischap]

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 sveltejs/rfcs#59

[Kapsonfire-DE]

Need to push this - its really an issue

[parischap]

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.

[parischap]

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

[parischap]

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