How do you guys handle circular imports, with vue-router?

[latel]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I’m confused. After installing vite-plugin-circular-dependency, I noticed a lot of circular dependencies.
I did this because I was facing Cannot access '...' before initialization errors, I know this is because circular dependencies problem, so I installed the plugin.

src/handlers/exchange-status-handler.ts
        src/handlers/exchange-status-handler.ts ( actually it's using router.push api ) -> src/router/index.ts -> src/router/modules/transfer.ts -> src/views/transfer/transfer-status.vue ->   src/handlers/exchange-status-handler.ts

I think some modules rely on the router for navigation, but the router typically has many modules, and these modules define paths. Paths, in turn, import Vue pages, which contain a lot of logic. It’s quite normal for the page to depend on some modules, and for those modules to rely on the router, to get currentRoute or navigation.

Reproduction

https://github.com/latel/vite-circular-dependencies-router

Steps to reproduce

pnpm i
pnpm build

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 91.59 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.local/state/fnm_multishells/16424_1740654918180/bin/node
    Yarn: 1.22.22 - ~/Library/pnpm/yarn
    npm: 10.8.2 - ~/.local/state/fnm_multishells/16424_1740654918180/bin/npm
    pnpm: 9.14.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 17.5

Used Package Manager

pnpm

Logs

pnpm build

> [email protected] build /Volumes/Code/play/vite-circular-dependencies-router
> run-p type-check "build-only {@}" --


> [email protected] build-only /Volumes/Code/play/vite-circular-dependencies-router
> vite build


> [email protected] type-check /Volumes/Code/play/vite-circular-dependencies-router
> vue-tsc --build

vite v6.2.0 building for production...
✓ 48 modules transformed.
rendering chunks (2)...  
  
  src/router/index.ts
        src/router/index.ts -> src/util/util.ts -> src/views/AboutView.vue -> src/views/AboutView.vue?vue&type=script&setup=true&lang.ts
✗ Build failed in 500ms
error during build:
[vite-plugin-circular-dependency] has circular dependencies in this project
    at file:///Volumes/Code/play/vite-circular-dependencies-router/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-circular-dependency/dist/index.mjs:1:4001
    at c (file:///Volumes/Code/play/vite-circular-dependencies-router/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-circular-dependency/dist/index.mjs:1:4056)
    at Object.generateBundle (file:///Volumes/Code/play/vite-circular-dependencies-router/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-circular-dependency/dist/index.mjs:1:5777)
    at Object.handler (file:///Volumes/Code/play/vite-circular-dependencies-router/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:51752:15)
    at file:///Volumes/Code/play/vite-circular-dependencies-router/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:21835:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ELIFECYCLE  Command failed with exit code 1.
ERROR: "build-only" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.

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.