I was working on a SvelteKit project with TypeScript (set up with Vite) and everything was running smoothly with "npm run dev". However, when I attempted to publish the app on Github Pages, an error popped up (on localhost) as I hovered over the only link that contained TypeScript code (which preloaded the page upon hovering).
[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 displayed in the screenshot resides within a Svelte component in the lib folder.
I later realized that the issue stemmed from the TS syntax not being recognized since it flagged an error when I removed the ': string' part of the code on one line, leading to an error on the subsequent line. This prompted me to switch to Vercel and modify the svelte.config.js file to use the Vercel adapter as per the documentation.
// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';
export default {
kit: {
adapter: adapter()
}
};
To my surprise, the same error persisted both in localhost and during attempts to deploy the app on Vercel. Could there be additional configurations required for this setup?