Skip to content

Bug: Svelte 5 + ESLint 9 - Persistent Parsing error: Unexpected token : Despite Correct Configuration #1283

@Dodo-Dude

Description

@Dodo-Dude

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

5.37.1

What version of eslint-plugin-svelte are you using?

3.11.0

What did you do?

Bug Report: Persistent Parsing error: Unexpected token : in Svelte 5 + ESLint 9

Issue Summary

There seems to be a fundamental issue with parsing Svelte 5 files that use reactive statements ($:) in an ESLint 9 environment. Despite numerous configuration attempts, a clean node_modules reinstall, and isolating the parser from the rules, a Parsing error: Unexpected token : error consistently occurs. This suggests a deeper incompatibility or bug in how the parser is being invoked or is interacting with the rest of the toolchain.

Environment Details

  • eslint-plugin-svelte: ^3.11.0
  • svelte-eslint-parser: ^1.3.1
  • eslint: ^9.32.0
  • svelte: ^5.37.1
  • Node.js: v22.17.1
  • NPM: 10.9.2
  • OS: Windows 11

Problematic Svelte Component (src/components/QuantitySelector.svelte)

The error always points to the reactive statement on line 17.

<script>
  // ... (metadata comments)
  import { shop as shopStore } from '../stores/gameStore.js';
  import * as shop from '../../Game/ShopLogic.js';

  // The error occurs on the following line:
  $: activeBuyQuantity = $shopStore.buyQuantity;

  // ... (rest of the component)
</script>

Debugging Steps Taken (All Unsuccessful in Fixing the Parsing Error)

We have exhaustively tried to solve this issue. The following steps were taken in order, none of which resolved the core parsing error:

  1. Initial Configuration: Started with a standard flat config using ...svelte.configs['flat/recommended']. This failed.
  2. Explicit Parser Definition: Added a separate, explicit config block for .svelte files to ensure svelte-eslint-parser was being set. This failed.
  3. Comprehensive Manual Configuration: Replaced all Svelte-related configs with a single, manually constructed block to eliminate any "magic" from the presets. This also failed.
  4. Clean Reinstall: Completely deleted node_modules and package-lock.json and ran npm install to rule out a corrupted installation. The parsing error persisted.
  5. Isolating the Parser: As a final diagnostic step, we disabled all Svelte-specific rules by commenting them out in eslint.config.js. The parsing error still occurred. This proves the issue lies with the parser integration itself, not the rules being applied to the parsed code.

Final eslint.config.js (Still fails)

This is the final configuration we arrived at after fixing all other unrelated issues (like global variable definitions). It correctly lints all JS files but fails on Svelte files.

import globals from "globals";
import pluginJs from "@eslint/js";
import svelte from "eslint-plugin-svelte";
import svelteParser from "svelte-eslint-parser";

export default [
  {
    ignores: ["dist/*", "build/*", "playwright-artifacts/*", "node_modules/*"],
  },
  {
    files: ["**/*.js", "**/*.mjs", /* ...other JS files */],
    languageOptions: {
      globals: { ...globals.browser, ...globals.node },
    },
  },
  {
    files: ["sw.js", "converter-worker.js"],
    languageOptions: {
      globals: { ...globals.serviceworker },
    },
  },
  // The problematic block
  {
    files: ["**/*.svelte"],
    languageOptions: {
      parser: svelteParser,
      globals: { ...globals.browser },
    },
    plugins: { svelte },
    // Rules were disabled for testing, but the error persists even with an empty rules object.
    rules: {},
  },
];

Current Workaround

The only way to get our project to build is to force ESLint to completely ignore Svelte files by modifying the lint command:

npx eslint . --no-cache --ignore-pattern "**/*.svelte"

What did you expect to happen?

ESLint should be able to correctly parse .svelte files containing $-prefixed reactive statements without throwing a Parsing error.

What actually happened?

A Parsing error: Unexpected token : is thrown, preventing any linting of Svelte files and blocking the build process.

Link to GitHub Repo with Minimal Reproducible Example

I'll add later

Additional comments

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs reproNeed a repository that can reproduce the problem

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions