question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR error: Cannot access '...' before initialization

See original GitHub issue

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 image

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 8.19 GB / 15.94 GB
  Binaries:
    Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.77)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.1.5 => 2.1.5

Used package manager:

Logs



Before submitting the issue, please make sure you do the following

  • 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.
  • Provide a description in this issue that describes the bug.
  • 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.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:38
  • Comments:50 (9 by maintainers)

github_iconTop GitHub Comments

18reactions
michaeljohansencommented, Nov 18, 2021

For future travelers: If you see the ReferenceError: Cannot access (…) before initialization error then you may have circular dependencies that need to be resolved. Discover them with a tool like Madge: madge --circular <path>

15reactions
oachoorcommented, Oct 26, 2022

still have this problem on vite@3.2.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to debug "Cannot access X before initialization" errors?
For anyone getting here, I found this solution and it worked for me. Basically this error has two main reasons.
Read more >
ReferenceError: can't access lexical declaration 'X' before ...
A lexical variable was accessed before it was initialized. This happens within any block statement, when variables declared with let or const ...
Read more >
cannot access before initialization webpack - You.com | The AI ...
It only gives an error with native modules no matter if the export is a function or number. This is because, as the...
Read more >
Vite HMR error: Cannot access '...' before initialization
网络基于axios实例封装了一个类。 每个模块的请求都继承这个基类。 只要涉及请求的代码进行保存时, vite hmr 会失效报错,只能强刷看更新。线上无此问题 ...
Read more >
vite HMR error: Cannot access '...' before initialization
vite HMR error: Cannot access '...' before initialization · “相关推荐”对你有帮助么? · 热门文章 · 最新评论 · 您愿意向朋友推荐“博客详情页”吗? · 最新 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found