This is a demo project to show what happens when you have circular dependencies in your project and how to fix them.
- Clone the repository:
git clone https://github.com/Maxim-Mazurok/vite-circular-dependency-demo cd vite-circular-dependency-demo- (optional) Use appropriate Node.js version:
nvm i - Install dependencies:
npm ci - Run the tests:
npm test
The idea is pretty simple: you have router, and component. Router imports component (to render it), and component imports router (to get own page URL). This creates a circular dependency.
Check comments in these files for details:
And compare them with the fixed versions:
Another approach is to just extract constants into separate file to avoid circular dependencies.
This can be helpful to detect and fix circular dependencies in your project: https://www.npmjs.com/package/vite-plugin-circular-dependency