CODEWITHSUNDEEP
vitesveltekit
David Dal Busco
David Dal Busco

Reputation: 8652

SvelteKit or vite hot module reload breaks global scss

When I npm run dev my SvelteKit / vite app locally, after a minute or so, a full hot module reload is triggered which leads to break my design.

Stacktrace example:

23:09:37 [vite] page reload .svelte-kit/generated/nodes/8.js 23:09:37 [vite] hmr update /.svelte-kit/generated/root.svelte 23:09:37 [vite] page reload .svelte-kit/generated/server-internal.js 23:09:37 [vite] page reload src/declarations/cmc/cmc.factory.did.js 23:09:37 [vite] hmr update /src/frontend/src/lib/components/guards/IdentityGuard.svelte

etc.

I am not sure is the issue is linked to the fact that my global style is not correctly reloaded (I'm using sass) or the fact that weirdly some raw script Svelte components are injected into style tag in the dom

e.g. I find following tag in the dom

<head>
  <style type="text/css" data-vite-dev-id="/Use...CollectionEdit.svelte?svelte&amp;type=style&amp;lang.css">
      ><script lang="ts">
    import type { PermissionText } from '$lib/constants/rules.constants';
        etc.
    </script>
  </style>

Another thing that is weird to me is that vite often detects changes in tsconfig.json and triggers new build even though the file has not changed in weeks

23:09:37 [vite] changed tsconfig file detected: /Users/.../admin/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.

Any clue or idea what I can track to solve this issue?

Upvotes: 2

Views: 834

Answers (1)

David Dal Busco
David Dal Busco

Reputation: 8652

Alright solved it or at least find a workaround. The issue seems to have been linked to the fact that my Mac triggers incorrect refresh through fsEvents. Even tough there are no changes on the local file system, it requests full reload after 1-2 min. Disabling fsEvents in the vite.config.ts prevents this to happen and per extension, avoid the problem.

server: {
  watch: {
    useFsEvents: false
  },
}

Why sass is not intepreted on full reload is to me unclear but, at least there is no more issue and hmr still works.

Upvotes: 2

Related Questions