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