Description
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