-
Notifications
You must be signed in to change notification settings - Fork 147
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
vitePreprocessfrom@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.jsinstead 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.sveltewith
<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-preprocessversion: 6.0.3 -
Whether your project uses Webpack or Rollup - Vite with Rollup