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;

[rigu]

In case if help someone: on my side is happen because IntellijIdea editor set <script type="ts">. Changed to be <script lang="ts">, it started to work

[Suyashtnt]

In case if help someone: on my side is happen because IntellijIdea editor set <script type="ts">. Changed to be <script lang="ts">, it started to work

type="TS" is incorrect, so it makes sense. Sveltes preprocess only accepts Lang="ts" afaik.

[thecoldstone]

Check:

• if type: "module" is set in package.json
• convert svelte.config.ts to svelte.config.js

P.S. You can use import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

[dannyharani]

My closing script tag had a space is it. <\script > was fixed to <\script>

[darricheng]

Renaming it to .js solves the issue.

.mjs also has this issue. Renaming to .js fixes it as well.