Skip to content

Svelte inspector points to incorrect line number when using lang="ts" #671

Open
@Bladesheng

Description

@Bladesheng

Describe the bug
When there is a <script lang="ts"> and I click on a element using the official Svelte inspector, the correct file is opened, but on an incorrect line number.

  • When I remove the lang="ts", it works correctly.
  • When I use the default preprocessor vitePreprocess from @sveltejs/vite-plugin-svelte, it works correctly as well.
  • I started to notice this arround the Svelte 5 release. In Svelte 4, it worked correctly.

The Svelte inspector is reading the file name and line number from element's property __svelte_meta, which is attached during development by Svelte.
When I use svelte-preprocess, the line number is incrorrect.
When I use @sveltejs/vite-plugin-svelte preprocessor, the line number is correct.

To Reproduce

Here is the full reproduction repo https://github.com/Bladesheng/svelte-preprocess-inspector-repro

Or step by step:

  • Create new project (SvelteKit minimal, Typescript)
pnpx sv create
  • Install svelte-preprocess and Svelte inspector
pnpm i svelte-preprocess @sveltejs/vite-plugin-svelte-inspector
  • Use the preprocessor in svelte.config.js instead of the default one
import adapter from '@sveltejs/adapter-auto';
import {sveltePreprocess} from "svelte-preprocess";

const config = {
	preprocess: sveltePreprocess(),
	kit: {adapter: adapter()}
};
export default config;
  • Enable Svelte inspector in vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';

export default defineConfig({
	plugins: [sveltekit(), svelteInspector({ showToggleButton: 'always' })]
});
  • Replace +page.svelte with
<script lang="ts">
    export function func1() {
        console.log(1);

        console.log(2);

        console.log(3);
    }
</script>

<p>paragraph 1</p>

<p>paragraph 2</p>

<p>paragraph 3</p>
  • Run the dev server
pnpm dev
  • Click on the paragraphs using the svelte inspector icon in top left
  • The correct file is opened in editor, but on a wrong line
  • It seems that each empty line in the script tag moves the focused line up by one
    • When there are no empty lines in the script tag, the correct line is focused.
    • When there are 2 empty lines in the script tag, the focused line is 2 lines above of where it should be.
  • Like I said previously, removing the lang="ts" or using the default preprocessor fixes this

Expected behavior
__svelte_meta should have the correct line number, so Svelte inspector can focus the correct line in your editor.

Information about your project:

  • Your browser and the version: chrome 138

  • Your operating system: Rocky Linux

  • svelte-preprocess version: 6.0.3

  • Whether your project uses Webpack or Rollup - Vite with Rollup

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions