svelte-preprocess: Latest version is causing TypeScript unexpected token errors

In my case, I had an old svelte script that I moved to a new sveltekit project, and typescript was specified like this :

<script type="ts">

I changed type to lang and it works !

<script lang="ts">

Looks like everyone has a different explanation for the same error !

Leaving it here in case someone makes the same mistake as me, as this is the top result on Google: If your SvelteKit config is called svelte.config.ts (not .js), this will happen too. Renaming it to .js solves the issue.

That’s sveltejs/svelte#6900

That fixed the problem with Svelte/Vite.

I moved my index.html inside src and changed the project root to src in svelte.config.js.

svelte.config.js needs to reference vite.config.ts relative to the project root. In my case:

svelte({
      configFile: '../svelte.config.js'
    })

Oddly, I’m still experiencing this with Sveltekit 1.0.0 created via vite project-name, choosing Svelte, choosing Sveltekit, Yes, using Typescript syntax and still the same Unexpected Token error as before.

<script lang="ts">
interface User {
  name: string
  id: number
}

class UserAccount {
  name: string
  id: number

  constructor(name: string, id: number) {
    this.name = name
    this.id = id
  }
}

</script>


<div class="mt-20 max-w-lg mx-auto p-10 rounded-lg bg-slate-100 border-2 border-slate-200">
  Tesing this.
</div>

The name : string on line 4 still throws the Unexpected Token error. I’ve tried everything listed in this thread. Any thoughts?

I found that I had to place the optimizeImports from carbon-preprocess-svelte, after the preprocess with postcss.

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import { optimizeImports } from 'carbon-preprocess-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors for more information about preprocessors
  preprocess: [
    preprocess({
      postcss: true
    }),
    optimizeImports()
  ],
  kit: {
    adapter: adapter()
  }
};

export default config;

Ran into the same issue. Fresh vite project as well created using npm create svelte@latest my-app.

EDIT: In my case it was a missing lang prop in script tag like:

<script lang="ts">
   ....
</script>

Adding it solved the problem.

For what it’s worth, coming from the Vercel-generated project, I solved this for myself follows:

 import adapter from '@sveltejs/adapter-vercel';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
 	kit: {
 		adapter: adapter()
 	}

Found this solution by running npm create vite@latest and picking all the project config files from the new project into my existing one until it worked.

Fixed by specifiying "target": "es2021" in tsconfig.json

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
+       "target": "es2021",
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "node"
    }
}

Related https://github.com/sveltejs/svelte/issues/6900

I’m getting this issue with almost every typescript-exclusive syntax

That’s sveltejs/svelte#6900

That fixed the problem with Svelte/Vite.

I moved my index.html inside src and changed the project root to src in svelte.config.js.

svelte.config.js needs to reference vite.config.ts relative to the project root. In my case:

svelte({
      configFile: '../svelte.config.js'
    })

Boost to this! I changed my root to root : 'src' which was the problem! When I pointed svelte to the config file relative to the root directory it worked!

In my case, preprocess version and target version didn’t change anything. the fix was even simpler: moving “svelte.config.ts” to “svelte.config.js”. Not sure where along the way that got changed, but make sure your svelte config file has a .js extension.

For what it’s worth: I returned to earlier version of svelte-preprocess to work around this problem.

From my package.json:

	"devDependencies": {
		"@supabase/supabase-js": "2.7.1",
		"@sveltejs/adapter-auto": "2.0.0",
		"@sveltejs/kit": "1.5.5",
		"@types/uuid": "9.0.0",
		"@typescript-eslint/eslint-plugin": "5.51.0",
		"@typescript-eslint/parser": "5.51.0",
		"autoprefixer": "10.4.13",
		"date-fns": "2.29.3",
		"eslint": "8.34.0",
		"eslint-config-prettier": "8.6.0",
		"eslint-plugin-svelte3": "4.0.0",
		"postcss": "8.4.21",
		"prettier": "2.8.4",
		"prettier-plugin-tailwindcss": "0.2.2",
		"svelte": "3.55.1",
		"svelte-check": "3.0.3",
		"svelte-markdown": "0.2.3",
		"svelte-preprocess": "4.10.7", <============= instead of 5.x.x
		"tailwindcss": "3.2.6",
		"tslib": "2.5.0",
		"typescript": "4.9.5",
		"uuid": "9.0.0",
		"vite": "4.1.1",
		"vitest": "0.28.4"
	},

get the same error on svelte-preprocess 4.10.7 if my tsconfig.json has “target”: “es2022” strangely it starts working if I set “target”: “es2021”

That’s https://github.com/sveltejs/svelte/issues/6900