create-react-app: ReferenceError: Cannot access 'varName' before initialization

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';

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?

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.

I found the same problem

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.