TypeScript code is not recogonized

[xsjcTony]

Describe the bug

SvelteKit is not recognising TypeScript code.

This is a mini project with some modifications based on the SvelteKit official template... I added tailwindcss and settings for normal SPA (because I need the router so I used kit).

Can anyone have a look at my reproduction repo to see what I did wrong? Thanks for the help. I believe it should be my own issue since I believe there's no way that Svelte won't work with TypeScript.

Reproduction

https://github.com/xsjcTony/50projects50days-svelte

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
    Memory: 42.50 GB / 63.84 GB
  Binaries:
    Node: 18.12.1 - C:\NodeJS\node.EXE
    Yarn: 1.22.19 - C:\NodeJS\yarn.CMD
    npm: 9.4.0 - C:\NodeJS\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.69)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-static: ^1.0.5 => 1.0.5
    @sveltejs/kit: ^1.3.6 => 1.3.6
    svelte: ^3.55.1 => 3.55.1
    vite: ^4.0.4 => 4.0.4

Severity

blocking all usage of SvelteKit

Additional Information

No response

[kristjanmar]

Just a guess, but the './types' path might be reserved because Svelte uses it for automatically typing the data returned from load functions.

Does it work if you change the name of the types file to something else?

[dummdidumm]

The reserved name is ./$types, so that can't be it.

I believe it's the svelte.config.ts - you need that to be a svelte.config.js, there's no TS support for that config file.

Transfering this to a discussion.

[eltigerchino]

I believe it's the svelte.config.ts - you need that to be a svelte.config.js, there's no TS support for that config file.

This sums up the issue. Without the valid svelte config file, it doesn't know it should use vitePreprocess() and thus no TypeScript support.

I've found a few changes that you'd need to make to get it working.

svelte.config.ts -> svelte.config.js

import { fileURLToPath, URL } from 'url'
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
- import type { Config } from '@sveltejs/kit'

+ /** @type {import('@sveltejs/kit').Config} */
- const config: Config = {
+ const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter({
      fallback: 'error.html'
    }),
    prerender: {
      entries: []
    },
    alias: {
      '@': fileURLToPath(new URL('src', import.meta.url))
    },
    paths: {
-      base: import.meta.env.PROD ? '/50projects50days-svelte' : ''
+      base: import.meta.env?.PROD ? '/50projects50days-svelte' : ''
    }
  }
}


export default config

Example here:
https://stackblitz.com/edit/github-m8vega?file=svelte.config.js,tsconfig.json

[xsjcTony]

Thanks so much for the help. One more question, what's the reason to use optional chaining for env?

[eltigerchino]

When I tried to run the dev server, it spat out an error saying import.meta.env was undefined. I guess it's undefined sometimes (maybe it runs before vite?) and that prevented the server from starting.

[xsjcTony]

Oh... then it means I cannot assume it's going to work for prod build either..

[eltigerchino]

Yeah, I'm not sure how to get Vite stuff working in svelte.config.js.

One workaround is to use good old process.env.

process.env.NODE_ENV === 'production' ? '/50projects50days-svelte' : '',

and run NODE_ENV=production tsc && vite build

https://stackblitz.com/edit/github-m8vega?file=svelte.config.js