Inertia with svelte vite and typescript

Hi there, i was lately struggling very much to add typescript to my inertia svelte vite projects and couldn't find any answer, would appreciate it, if somebody knew the solution to this

godofclash

3 years ago

Level 1

for those of you who have the same problem, i now solved it. You will have to install some dependecies: npm install -D @rollup/plugin-typescript svelte-preprocess @tsconfig/svelte/tsconfig.json

You then want to create a tsconfig.json file which extends the @tsconfig/svelte config fill

{
    "extends": "@tsconfig/svelte/tsconfig.json",  
    "include": ["resources/**/*"],  
    "exclude": ["node_modules/*"]  
}

Now you just have to change the vite.config.js file and include both typescript ans sveltePreprocess and you're good to go

import './resources/css/app.css'

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import typescript from '@rollup/plugin-typescript'
import sveltePreprocess from 'svelte-preprocess'

export default defineConfig({
    plugins: [
        laravel.default({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            preprocess: sveltePreprocess()
        }), 
        typescript({
            tsconfig: './tsconfig.json'
        })
    ],
});

3 likes

patprick

3 years ago

Level 1

@godofclash Thank you. It worked..! 🫡

ruthback

2 years ago

Level 6

@godofclash Thank you for making this! I was able to get it working without installing the rollup plugin, as you can provide an object to the preprocessor to enable typescript:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        svelte({
            preprocess: [sveltePreprocess({ typescript: true })],
        }),
    ]
});

Please or to participate in this conversation.