CodexBloom - Programming Q&A Platform

VSCode Live Server Not Refreshing on File Save in Svelte Project with Vite

πŸ‘€ Views: 98 πŸ’¬ Answers: 1 πŸ“… Created: 2025-06-01
vscode svelte vite javascript

Quick question that's been bugging me - Could someone explain I'm experiencing an scenario where the Live Server extension in VSCode doesn't refresh the browser when I save changes to my Svelte components in a Vite project... My project is set up with the latest versions of Svelte (3.44.0) and Vite (2.6.12). I have the Live Server extension installed (version 5.7.9), but it seems to only refresh when I modify non-Svelte files, like `index.html` or CSS files. I've tried setting the `open` option in the Vite configuration to `true`, but it doesn’t help. Here's my `vite.config.js`: ```javascript import { defineConfig } from 'vite'; import svelte from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [svelte()], server: { open: true, watch: { usePolling: true, }, }, }); ``` I've also double-checked that my Live Server settings are correct. In the VSCode settings, I've ensured that the following options are set: - `liveServer.settings.port` set to `5500` - `liveServer.settings.wait` set to `500` milliseconds But still, the Live Server only reloads for certain file types. In the console, I occasionally see the message `Browser is not refreshing - there are no changes detected in the file.` even though I am definitely making changes. Is there a specific configuration or workaround that I might be missing? I prefer not to switch to a different development server, as Vite is providing great performance so far. For context: I'm using Javascript on Linux. I'm using Javascript 3.10 in this project. Am I approaching this the right way? The project is a REST API built with Javascript. I appreciate any insights!