vite:hmr circular imports detected: /src/index.css -> /src/main.jsx -> /src/index.css

[Nefcanto]

Describe the bug

This dependency chain needs to be more specific.

I'm finding cyclic dependencies of my vite-react project using --debug hmr flag, which works exceptionally well for other dependencies.

However, now I'm stuck on this one. It says /src/index.css uses /src/main.jsx which I don't understand.

I'm using Tailwind, and this is the content of my index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .link {
        @apply underline text-blue-600 cursor-pointer
    }

    .link:hover {
        @apply text-blue-800
    }

    .link:visited {
        @apply text-purple-600
    }
}

I can't find out why and how this file uses main.jsx.

I also tried to create a reproduction, but I failed. I'll send the reproduction attempt, though.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rf8vvv?file=src%2FApp.jsx,src%2Findex.css,src%2Fmain.jsx&terminal=dev

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.2 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
    Memory: 6.58 GB / 15.49 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^4.2.0 => 4.2.0 
    vite: ^5.0.4 => 5.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-rf8vvv (Open reproduction)

[newives]

It’s unbelievable that such simple code doesn’t support hmr
I thought only complex code is not supported

[newives]

Just kidding, maybe the unborn Rolldown will solve it

[MuhammadHamzaChippa]

@Nefcanto did you solve this issue I am also facing the unnecessary circular dependencies due to using tailwind in .css filees

[Nefcanto]

@MuhammadHamzaChippa nope. We just suffer from a full reload for each character that we change in our source code. Vite is becoming a pain in the ass.

[MuhammadHamzaChippa]

I have just migrated my enterprise application from CRA to Vite and it was a terrible experience both with the paths and using tailwind. Are you planning to go back to CRA ?

[Nefcanto]

@MuhammadHamzaChippa never. For us, CRA would take more than 70 seconds just to compile. Vite compiles in less than 500 milliseconds. We will never go back to CRA. But we're stuck at this Vite problem now.

[MuhammadHamzaChippa]

Then simply stop using tailwind in css files this is the only solution to avoid page reload. Am I right?

[Nefcanto]

@MuhammadHamzaChippa , then what should we do? What are the other options?

[MuhammadHamzaChippa]

Use ordinary css i guess