warn if HMR failed due a circular dependency issue

[yeion7]

Clear and concise description of the problem

Vite's HMR fails if in some point of the dependency tree find a circular dependency issue, and then as a fallback triggers a ful l page reload, but the user doesn't get some info to be able to fix the issue

Suggested solution

If the HMR fails due a circular dependency, display a message for users about it

updateModules uses a utils propagateUpdate to traverse the files dependency tree and if find a circular dependency, returns true to triggers a full page reload,

My proposal is, instead of return a boolean, updateModules could return ModuleNode | undefined, if returns a ModuleNode, triggers a page reload, and send a message with the module and the importers

Alternative

No response

Additional context

I have been migrating from create-react-app@5 to vite@2.9.5 and this was annoying, I could't realized why HMR works with some files but not with others, I had to use ndb, and put a debugger here, then edit a file and debug the issue, I realized that I have a lot of circular dependency issues in my project 🙈

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

Related #3033

[josephbuchma]

This would be awesome, I spent way too much time figuring out what's wrong after migrating from CRA.
Here are a few tips for those who find themselves in a similar situation (for TypeScript):

1. Find all circular dependencies in your codebase using madge: npx madge --circular --extensions ts ./
2. I found out that a lot of those circular imports in my project were imports of typescript type definitions, and it turns out that if you import them using import type instead of regular import, vite does not care if those are introducing circular dependency.

To quickly refactor all type imports with import type, add following rule to your eslintrc:

    "@typescript-eslint/consistent-type-imports": [
      "error",
      {
        "prefer": "type-imports",
        "disallowTypeAnnotations": false
      }
    ]

then run eslint with --fix flag to replace all type imports with import type ...

Also related #10208

[jessegavin]

We recently migrated a large Vue app from Vue CLI (Webpack) to Vite. This issue has been the biggest pain point for us.

Tools like madge are very helpful in finding circular dependencies, but it doesn't work with Vue single file components out of the box. Even after implementing a solution to find circular dependencies with madge I am still encountering page reload updates instead of mot module updates.

This is a big deal to our team, please consider implementing this.

[artnikbrothers]

I have the same issue with React app after migrating from CRA to Vite

[evanshe]

#2466 try this, may be help