ReferenceError: Cannot access 'varName' before initialization
See original GitHub issueDescribe the bug
Upgraded a react-app running React v17 to use react-scripts 4.0.0. First load in development returns an error that did not exist using 3.4.4
Did you try recovering your dependencies?
Yes
6.14.8
Which terms did you search for in User Guide?
Reference error
Environment
Environment Info:current version of create-react-app: 4.0.0 running from C:\Users\MattCorner\AppData\Roaming\npm-cache_npx\11504\node_modules\create-react-app
System: OS: Windows 10 10.0.19041 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 14.8.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.423.0), Chromium (86.0.622.51) Internet Explorer: 11.0.19041.1 npmPackages: react: Not Found react-dom: Not Found react-scripts: Not Found npmGlobalPackages: create-react-app: Not Found
Steps to reproduce
This applications works fine in react-scripts 3.x.x. Based on the error message I suspect something to do with hot refresh.
The error is complaining about a custom hook called useSnackbar. This useSnackbar.js exports a SnackbarProvider and the useSnackbar hook. The useSnackbar hook is reexported through a hooks/index.js as so:
export {useSnackbar} from "./useSnackbar";
This hook is then use throughout the app.
- Start app in development
- Microsoft edge loads and reports following error
Expected behavior
Applications runs correctly in development using hot refresh.
Actual behavior
App errors on load.
Reproducible demo
Unable to reproduce outside of application.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:17 (1 by maintainers)
This happened to me today. The situation was I bundled several files in a directory into an
index.ts
file. Elsewhere in my app, I was directly referencing a component with its full path instead of the bundled export. This was throwing the error../Viewers/index.js
(Good) App.tsx
(Bad) App.tsx
So we’ve got the exact same Context/Provider/hook in two apps. One works with react-scripts 4, one doesn’t.
The only difference between the two that we can tell is one imports the hook through an index.js, and one imports directly from the hook file.
Removing the following line from the index.js stops the issue.
I can’t tell why this would cause the issue?