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)
- 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>
- 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
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.lang="ts", it works correctly.vitePreprocessfrom@sveltejs/vite-plugin-svelte, it works correctly as well.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-sveltepreprocessor, 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:
svelte.config.jsinstead of the default onevite.config.ts+page.sveltewithlang="ts"or using the default preprocessor fixes thisExpected behavior
__svelte_metashould 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.3Whether your project uses Webpack or Rollup - Vite with Rollup