ReferenceError: Cannot access 'varName' before initialization

[mattcorner]

Describe 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(R) Core(TM) 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.

1. Start app in development
2. Microsoft edge loads and reports following error
3. 

Expected behavior

Applications runs correctly in development using hot refresh.

Actual behavior

App errors on load.

Reproducible demo

Unable to reproduce outside of application.

[rafaelsorto]

Hi @mattcorner, are you using context inside that hook perhaps?

I was having a similar issue resulting in error Cannot access 'AppContext' before initialization, but it was because I have a header that was trying to use the App context, but the App context was defined inside another component in the app that was called after the Header. I had to lift the Provider Up in the hierarchy of components and now that error is gone.

The same thing was working without any issues on a previous react-scripts version.

[mattcorner]

Thanks @rafaelsorto , but no luck with that. The SnackbarProvider is already at the very top level of the App, and there are no uses of the hook outside of this Provider. The Context itself is created in the useSnackbar.js and exported as a Provider.

[rafaelsorto]

That must be the issue, that you have the Context in the same file and exporting it, and then you are calling it outside of the useSnackbar but also using it inside I suppose? Try moving everything related to the createContext call, and the provider to a component that gets called before. If you could manage to reproduce this in codesandbox it would be easier to help you identify the issue. But this definitely sounds like a very similar issue to the one I was having.

[mattcorner]

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.

export {useSnackbar} from "./useSnackbar"

I can't tell why this would cause the issue?

[rafaelsorto]

Are you also importing the index.js file from useSnackbar.js file? maybe a cyclic import somewhere? Its nice that you were able to fix the issue.

[dons20]

Did you import the useSnackbar before exporting it again? Is there a particular reason you needed to re-export it?

[Undeadlol1]

I had the same problem when i used configuraton objects outside of component and/or after component initialization.

Bad:

function App() {
   return (
    <Provider config={providerConfig} />
   )
}

const providerConfig = {
 // Some configurations.
}

Good:

function App() {

   const providerConfig = {
    // Some configurations.
   }

   return (
    <Provider config={providerConfig} />
   )
}

NOTE: I am not sure how correct my information is. I might confuse your problem with another one.

[mattcorner]

Did you import the useSnackbar before exporting it again? Is there a particular reason you needed to re-export it?

Rexported using the code below. Just to simplify imports elsewhere in the codebase. importing {x, y} from "hooks" is nicer than individually, and keeps the code structured.

export {useSnackbar} from "./useSnackbar";

I had the same problem when i used configuraton objects outside of component and/or after component initialization.

Unfortunately not, nothing is passed in to the Provider.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[iangornall]

Same issue. I import all my hooks into a hooks.js file and export them from there, and have this error in react-scripts 4, but not in 3, which is preventing me from upgrading.

[zheeeng]

same issue here

[SunburnedGoose]

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

export * from './ComponentViewer';
export * from './FullscreenViewer';
export * from './MobileViewer';
export * from './PanelViewer';
export * from './ViewerRoutes';

(Good) App.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';

import './App.css';
import { ViewerRoutes } from './Viewers';

(Bad) App.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';

import './App.css';
import { ViewerRoutes } from './Viewers/ViewerRoutes';

[collides]

I found the same problem

[JESii]

Exactly the same issue for me -- thanks @SunburnedGoose !

[ussserrr]

I've faced this error with env-variables. In App.tsx:

export const API_URL = process.env.REACT_APP_API_URL ?? '/api';

Then I import it in other files and getting the "Uncaught ReferenceError: Cannot access before initialization" error. The solution was to move the declaration above to another file other than App.tsx.

[lluchkaa]

same problem, reexporing value from other file causes this issue

[rafaelsorto]

It seems this issue should be closed as it seems to be related to how imports/exports work on node/webpack/etc, and not directly related to create-react-app

[rajmaddy89]

@SunburnedGoose : You saved me after 3 days. Thanks :-)