SvelteKit(ViteJS) + TailwindCSS not hot reloading components

user_14087104 0
Viewed 1116

I'm trying to code an app using TailwindCSS and SvelteKit, which uses ViteJS under the hood, and while coding I realized that my Header component that is inside ./src/components/common/Header.svelte was not hot reloading on changes. No matter how big or small the change to the component, Svelte would not display them until I terminated script in the console and re-ran npm run dev.

The normal behaviour would be that the whole page updated WITH changes to the components other than pages.

Note that adding and removing changes to any routes the changes are instantly visible but the components stay the same.

This issue got quite annoying after some time and I tried finding the fix in TailwindCSS and in the svelte.config.js (Not a .cjs file in Svelte-Kit) file.

After searching for a ton of answers I could not find anything that worked.

This behaviour is quite weird since in the other projects that I work on that use this same architecture of TailwindCSS and Svelte-kit the HMR works like a charm.

Here is the code for my Header.svelte file and the __layout.svelte

Header.svelte

<script>
</script>

<header>
    <!-- TEST HEADER -->
    <nav>
        <ul class="flex gap-5 bg-red-500">
            <!--These classes are tests and won't change the appearance of the Header unless I restart the script-->
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <!--Other random change that won't update-->
            <li>Random Change</li>
        </ul>
    </nav>
</header>

__layout.svelte

<script>
    import '../css/tailwind.css';
    import Header from '../components/common/Header.svelte';
</script>

<Header />
<slot />

also my config files:

tailwind.config.cjs

module.exports = {
    content: ['./src/**/*.svelte', './src/app.html'],
    plugins: []
};

svelte.config.js

import preprocess from 'svelte-preprocess';
import path from 'path';


// @type {import('@sveltejs/kit').Config
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        vite: {
            resolve: {
                alias: {
                    '@components': path.resolve('./src/components'),
                    '@routes': path.resolve('./src/routes'),
                    '@utils': path.resolve('./src/utils'),
                    '@data': path.resolve('./src/data')
                }
            }
        }
    }
};

export default config;
sveltekit vite tailwind-css svelte
1 Answers

This is how I solved the problem in my case:

  1. I double checked and saw that I used a lowercase letter instead of a uppercase letter in the import path of my component. The component was strangely still working but the hot module reloading (HMR) was not working. I might have renamed a parent folder with an uppercase while developing, it might be the cause.

  2. I stopped the terminal, ran 'npm run dev' or 'yarn dev' again

  3. I set the component outside the layout file to check if HMR was working. It worked fine. Then put it back in the layout file, and it worked again.

Not really a satisfactory answer as I could not pinpoint the cause of the problem but anyone could try these steps if it happens for them. It might just solve it.

user_73337660
Related