When adding svelte plugin defineConfig.plugins throws unexpected token error.

[Relaxe111]

Describe the bug

When i add in vite.config.ts :

//vite.config.ts
import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

export default defineConfig({
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  //preprocess: vitePreprocess(),
  plugins: [
    svelte({
      preprocess: [vitePreprocess()],
    }),
  ],
});

i get following:

//in browser: 
[plugin:vite-plugin-svelte] /src/lib/Counter.svelte:2:11 Unexpected token
/src/lib/Counter.svelte:2:11
1 |  <script lang="ts">
 2 |    let count: number = 0
                 ^
 3 |    const increment = () => {
 4 |      count += 1

repro: https://stackblitz.com/edit/vitejs-vite-anfcqc?file=svelte.config.ts,package.json&terminal=dev

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-anfcqc?file=svelte.config.ts,package.json&terminal=dev

Reproduction

No response

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^2.0.2 => 2.0.2 
    svelte: ^3.55.0 => 3.55.1 
    vite: ^4.0.4 => 4.0.4

[Relaxe111]

What i am doing wrong?

[dominikg]

you mixed up with a svelte.config.ts that contains vite config. note that svelte.config must be .js, ts config file is not supported for svelte

check the output of npm create vite@latest --template svelte-ts for a working combo of vite and svelte config.

I recommend setting preprocess: vitePreprocess() in svelte.config.js. Inline in vite plugin config works but other tooling, eg the vscode extension won't be able to pick it up

[Relaxe111]

ok. How can i add additional configurations?
I need to a adapt an vite.config.js file which works with vite v3 but can't make it work wil latest vite version?
import { defineConfig } from 'vite';
import { resolve } from 'path';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { default as MicroVitePlugin } from '@micro-fe/vite-plugin';

//suggested vite.config.ts file
const VITE_APP_NAME = 'subapp3';
const DEV_HOST = 'localhost';
const DEV_PORT = 8003;
// TODO: change to real deploy domain
const DEPLOY_URL = 'http://localhost:8003';
const isProd = process.env.NODE_ENV === 'production';
const isMicro = process.env.VITE_MICRO_MODE === 'true';

let base = '/';
if (isProd) {
    base = DEPLOY_URL;
} else if (isMicro) {
    base = `/${VITE_APP_NAME}/`;
}

// https://vitejs.dev/config/
export default defineConfig({
    base,
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),
        },
    },
    plugins: [
        // ...(isProd ? svelte() : []),
        svelte({}),
        MicroVitePlugin(VITE_APP_NAME, {
            useDevMode: !isProd,
        }),
    ],
    server: {
        cors: true,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        port: DEV_PORT,
        hmr: {
            host: DEV_HOST,
            port: DEV_PORT,
        },
    },
});

[dominikg]

This tracker is for reproducible bugs with vite plugin svelte. For questions and support please use https://svelte.dev/chat help section

for issues with micro vite plugin i recommend contacting them directly