Latest version is causing TypeScript unexpected token errors

[Nukiloco]

Describe the bug Upgrading from 4.9.5 to 4.10.1, a new bug seems to appear with TypeScript classes resulting in svelte-preprocess to return unexpected token errors.

Currently to prevent this issue, you need to downgrade svelte-preprocess to 4.9.5.

Logs

12:12:46 PM [vite] Internal server error: Unexpected token
  Plugin: vite-plugin-svelte
   39 |  class BackgroundImageDraw {
   40 |      context = null;
                     ^
   41 |      drawAlways = false;
   42 |      image = null;

To Reproduce

class Square {
 size = 10
}

Note that TypeScript allows class variables to have initializers in them and this was working before upgrading svelte-preprocess from 4.9.5 to 4.10.1.

Expected behavior There should be no errors returning when this happens.

Information about your project: Browser: Version 89.0.4389.114 (Developer Build, ungoogled-chromium) (64-bit) Operating System: Windows 10 svelte-preprocess: 4.10.1 Build Process: Vite

[dummdidumm]

Can't reproduce this given the steps above. Can you provide a reproduction repository?

[Suyashtnt]

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

[dummdidumm]

Please provide a reproduction repository or steps on how to reproduce this, which include your setup (Rollup / Vite / SvelteKit )

[Suyashtnt]

Please provide a reproduction repository or steps on how to reproduce this, which include your setup (Rollup / Vite / SvelteKit )

1. https://github.com/glowsquid-launcher/glowsquid
2. cd into launcher and run yarn install (make sure you have yarn installed)
3. run make web
4. open launcher/src/lib/components/QuickLaunchCard.svelte and try to add explicit typings for the props
5. see error in vite hmr stuff

[Suyashtnt]

@dummdidumm in case you havent seen it yet ^

[AsakuraMizu]

It doesn't work on my machine, either. environment:

• svelte: 3.44.0
• svelte-preprocess: 4.9.8
• tslib: 2.3.1
• typescript: 4.4.4
• vite: 2.7.2

[AsakuraMizu]

@Suyashtnt After some tests, I find that it's icons and pictograms preprocessor you(we) import from 'carbon-preprocess-svelte' that cause this issue. Removing these two preprocessors makes it work.

[Suyashtnt]

@Suyashtnt After some tests, I find that it's icons and pictograms preprocessor you(we) import from 'carbon-preprocess-svelte' that cause this issue. Removing these two preprocessors makes it work.

well that sucks. Atleast i can use typescript now. Maybe this will actually give me the motivation to continue working on glowsquid @Nukiloco are you also using this plugins?

[tombohub]

2 |    let sheetCount;
 3 |  
 4 |    function squareFootage(sheetLength: number, sheetCount: number) {
                                          ^
 5 |      return sheetLength * sheetCount * 4;
 6 |    }

not using any library, its fresh vite create project

[alxdsz]

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.

[tombohub]

they told me to install svelte-preprocessor, did you install that?

[alxdsz]

I have svelte preprocess configured as follows:

import preprocess from 'svelte-preprocess';
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: [
		preprocess({
			postcss: true,
		}),
	],

	kit: {
		adapter: adapter()
	}
};

[tombohub]

I started new project with Comand line 'npm init vite@latest' and then it's gonna ask you all the options. Choose svelte' and typescript. Now it's working

[YamiOdymel]

Same problem, the project was initialized with npm create svelte@latest .

(property) NavigationState.step_id: number Unexpected token

If you expect this syntax to work, here are some suggestions: If you use typescript with svelte-preprocess, did you add lang="ts" to your script tag? Did you setup a svelte.config.js? See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(parse-error)

package.json

"devDependencies": {
	"@sveltejs/adapter-auto": "next",
	"@sveltejs/kit": "next",
	"@types/validator": "^13.7.9",
	"@typescript-eslint/eslint-plugin": "^5.27.0",
	"@typescript-eslint/parser": "^5.27.0",
	"croppie": "^2.6.5",
	"dayjs": "^1.11.5",
	"eslint": "^8.16.0",
	"eslint-config-prettier": "^8.3.0",
	"eslint-plugin-svelte3": "^4.0.0",
	"jwt-decode": "^3.1.2",
	"prettier": "^2.6.2",
	"prettier-plugin-svelte": "^2.7.0",
	"svelte": "^3.44.0",
	"svelte-check": "^2.7.1",
	"svelte-preprocess": "^4.10.6",
	"tslib": "^2.3.1",
	"typescript": "^4.7.4",
	"validator": "^13.7.0",
	"vite": "^3.1.0"
},
"type": "module"

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import path from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(),
		alias: {
			"@": path.resolve('./src'),
		}
	}
};

export default config;

[YamiOdymel]

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

[Suyashtnt]

I think this issue simply needs better logging to fix it, since it can be caused by a variety of issues

[tjmgregory]

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.

[caseyplummer4haliontech]

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;

[nrthbound]

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?

[JohnSters]

Exactly the same as nrthbound and tried in both PHPStorm and Visual Studio Code with svelte 3 snippets, svelte for VS Code and Svelte Intellisense plugins installed.

[DzmitryFil]

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"

[dummdidumm]

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

[DavidSabine]

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"
	},

[eakl]

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'
    })

[mahmoud]

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.

[glops]

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 !

[GavinSiver]

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!

[terwer]

I solved with esnext in tsconfig and sevlte.config.js file like this

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"

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

[lxhom]

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.

[mihaipoenaru]

Renaming it to .js solves the issue.

Just commenting to let other people know that this also solved the issue for me. I have no idea why. I'm also getting a warning that vitePreprocess is not resolvable. The config file is the one generated when I made an empty TS sveltekit project like in the tutorial. I think it generated a js file initially, but I made it into a ts one because it "made sense"

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;