HMR error: Cannot access '...' before initialization
Problem
Describe the bug The error happens when I try to edit component, that 1. Wrap in `connect` function (redux) 2. Is inside dependency loop 3. There is another component inside dependency loop Seems weird, but it's not so rare case when project uses routers like UiRouter or Universal router I expect that component will be updated with HMR without errors or may be reload the page but not to throw an error Reproduction Repo: https://github.com/xSorc/test-vite-fast-refresh-loop-dependency To reproduce this error you need to open the project and try to edit `Component.tsx`. You will see an error System Info Output of `npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers`: [code block] Used package manager: Logs [code block] --- Before submitting the issue, please make sure you do the following - [x] Read the Contributing Guidelines. - [x] Read the docs. - [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [x] Provide a description in this issue that describes the bug. - [x] 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 https://github.com/vuejs/vue-next instead. - [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Error Output
error happens when I try to edit component, that
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix HMR Error: Circular Dependency in Redux Connected Component
The error 'Cannot access '...' before initialization' occurs due to circular dependencies when using Hot Module Replacement (HMR) with Redux connected components. When a component is wrapped in the `connect` function and is part of a circular dependency loop, it can lead to issues where the component is not fully initialized before being accessed, causing the HMR process to fail.
Awaiting Verification
Be the first to verify this fix
- 1
Identify Circular Dependencies
Examine the component imports to identify any circular dependencies. Use tools like Madge or dependency graph visualizers to help pinpoint the loops.
bashnpx madge --circular src/ - 2
Refactor Component Imports
Refactor the components to eliminate circular dependencies. This may involve breaking components into smaller parts or using dynamic imports to load components only when needed.
typescriptconst Component = React.lazy(() => import('./Component')); - 3
Use React.memo for Performance Optimization
Wrap the connected component with `React.memo` to prevent unnecessary re-renders and to help with HMR stability. This can reduce the chances of accessing uninitialized components.
typescriptconst MemoizedComponent = React.memo(ConnectedComponent); - 4
Update Vite Configuration
Ensure that your Vite configuration is optimized for HMR. Check if the `server.hmr` settings are properly configured to handle module updates without full reloads.
javascriptexport default defineConfig({ server: { hmr: { overlay: false } } }); - 5
Test Changes
After making the changes, run the application and edit the `Component.tsx` file to verify that the HMR works without throwing errors. Confirm that the application updates as expected.
bashnpm run dev
Validation
Confirm that editing the `Component.tsx` file no longer throws the 'Cannot access ... before initialization' error and that the component updates correctly in the browser without a full page reload.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep