How do you guys handle circular imports?

[SuspiciousLookingOwl]

I've been battling with Vite's HMR for 1.5 years now. My project has some circular dependencies that cause Vite's HMR to not work properly.

It all started with getting HMR error: Cannot access '...' before initialization error from late 2022, until I found #2466 (comment), which magically makes the HMR work again (I also commented on the issue, sharing the solution)

I found #2466 (comment), which prevents HMR from breaking if there are circular dependencies, but I'm not sure what are the drawbacks

// vite.config.ts

export default defineConfig({
  plugins: [
    // your plugins,
    {
      name: "singleHMR",
      handleHotUpdate({ modules }) {
        modules.map((m) => {
          // m.importedModules = new Set(); // for vite 4
          m.clientImportedModules = new Set(); // for vite 5
          m.importers = new Set();
        });

        return modules;
      },
    },
  ],
});

---

I recently did a code refactor and clean up on my project, including updating Vite from 4 to 5, and I decided to try to revisit this issue again, I thought "oh maybe Vite improved or fixed the cyclic imports issues", I tried removing that plugin after I updated to Vite 5 and my HMR started to break again. After some searching, I found #14975 (comment)

In Vite 5, Vite will try its best to avoid circular imports when possible. There are cases where we can't apply HMR without the risk of breaking your app due to circular execution order, it's documented at https://main.vitejs.dev/guide/troubleshooting.html#a-full-reload-happens-instead-of-hmr. Ideally you should avoid it if possible.

Which to me, it sounds like Vite will not / is not supposed to support circular imports, I tried to refactor my code so it doesn't have circular imports, but I decided that it's not worth it.

For now, I'm going back to the singleHMR plugin, which seems to still work fine, but I'm worried that it might bite me in the butt later.

How do you guys handle circular imports on your Vite project? Do you just try to avoid circular imports as much as possible? From what I see, this poor circular import experience is a bummer for some developers.

[evgeniyworkbel]

@SuspiciousLookingOwl any updates?

[yd4011439]

I was able to get out of some circular dependencies by using the global scope

[sleeyax]

What do you mean by that? An example please?

[yd4011439]

You can do:

globalThis.someVariable = value

If you are in typescript, define the type in the global scope and you will get the type hints:

declare global {
  someVariable: Type
}

(Keep the type in the entry point file like main.ts or which ever is the entry point)

Then you access those variables as simply someVariable or globalThis.someVariable

[SephReed]

So.... ? Does vite not allow a parent and child node of different classes to know about each other simultaneously, or what?

[ecartz]

So.... ? Does vite not allow a parent and child node of different classes to know about each other simultaneously, or what?

It's fine for two different classes to know about each other simultaneously, but you can't put them in separate files that import from each other. That's not really a Vite issue. It's a problem in the underlying language (JS or TS). The Vite problem is that it isn't guaranteed to avoid circular imports as part of its build process. Its build process may reorganize the classes such that they end up in different files even though they were originally in the same file.

Another way of saying this is that you shouldn't have circular imports. Circular class definitions are fine if both (all) classes involved are in the same file.

[johnfn]

The point of Vite was to be a simple, plug-and-play solution that just worked - without having to reorganize your entire repository due to arbitrary constraints. Vite 5 breaking HMR due to circular references loses a lot of what was useful about Vite in the first place.

[jdorsey-mwt]

For those looking to use the method mentioned by the OP to bypass the circular dependency problem blocking HMR, this works when using Vite 7.0.2. Using the new hotUpdate() - handleHotUpdate() is being depreciated. See: https://vite.dev/changes/hotupdate-hook.html

export default defineConfig({
  plugins: [
    // other plugins...
    {
      name: 'ignoreHMRCircularDependencies',
      hotUpdate({ modules }) {
        modules.forEach((m) => {
          m.importedModules = new Set()
          m.importers = new Set()
        })

        return modules
      },
    },
  ],
})