ReferenceError: Cannot access 'varName' before initialization

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® 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.

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.

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

[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?