SvelteKit not recognizing Typescript syntax

Question

I have a SvelteKit project with typescript (setup with Vite) that worked fine when running "npm run dev". However, when I tried putting the app on Github Pages, this error showed up (on local host) when hovering over my only link containing typescript code (it preloads the page when the link is hovered).

[plugin:vite-plugin-svelte] Unexpected Token

    [plugin:vite-plugin-svelte] C:/Users/mwnbo/source/repos/Svelte/chess-app/src/lib/Board.svelte:10:14 Unexpected token
C:/Users/mwnbo/source/repos/Svelte/chess-app/src/lib/Board.svelte:10:14
8 |    import { get } from 'svelte/store';
  9 |  
 10 |    const testFen: string = 'rbq5/8/8/8/8/8/8/RBQ5';
                      ^
 11 |    const kingTest: string = 'k7/8/8/8/8/8/8/K7';
 12 |    // let chessBoard = new ChessBoard(kingTest);

The code snippet shown in the screenshot is within a svelte component, in the lib folder.

I know the problem is that it doesn't recognize the ts syntax since I remove the ': string' part of the code, and the error showed up on the next line. The

I then switched to Vercel, changing the svelte.config.js to use Vercel adapter like indicated in the docs.

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
    kit: {
    adapter: adapter()
    }
};

It showed the same error, in the localhost and when trying to deploy the app on Vercel. Is there some configuration I need to add?

Answer 1

Preprocessing is missing from the svelte.config.js.

Either use vitePreprocess from the plugin or the separate svelte-preprocess. You also need lang="ts" on the script, in case that is missing too.

Svelte 5 should support basic TS typing features without a separate preprocessor (i.e. features that only require erasing of types rather than transpilation as is required for e.g. enum).

The adapter being used is irrelevant.