javascript - How do I approach solving this problem: Cannot access 'calculationEntry' before initialization?

Question

I'm developing a large CRA single page app. It has been running fine for months, with the normal bugs that are normally fixable. A couple of weeks ago it failed by just hanging in the splash page with a spinning circle. No code was hit so no breakpoints worked. I did a lot of experimentation with the importing and exporting of all the files, thinking that was the root cause. Finally I thought to do a build and run that. That did get past the splash screen and generate an exception. The first was fixed, but now I get this Cannot access 'calculationEntry' before initialization error. I'm using VSCode and the launch.json configuration is:

  "name": "Chrome React",
  "type": "chrome",
  "request": "launch",
  "sourceMaps": true,
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "userDataDir": "${workspaceRoot}/.chrome",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  },
  "breakOnLoad": true

I can't show example code, the whole project compiles without error. The error occurs when I run with f5. This is what I get. The name 'calculationEntry' is a function, and I think that a function is initialized when declared. So why this error?

        "use strict";
    __webpack_require__.r(__webpack_exports__);
    /* WEBPACK VAR INJECTION */(function(__react_refresh_utils__, __react_refresh_error_overlay__) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "calculationEntry", function() { return calculationEntry; });
                                                                                ^
    Exception has occurred: ReferenceError: Cannot access 'calculationEntry' before initialization
      at Module.calculationEntry (http://localhost:3000/static/js/main.chunk.js:5896:204)
        at Module.calculationEntry (http://localhost:3000/static/js/main.chunk.js:53960:169)
        at Object.registerExportsForReactRefresh (http://localhost:3000/static/js/vendors~main.chunk.js:995:38)
        at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:54703:25)
        at Module../src/moduleNameSpace.js (http://localhost:3000/static/js/main.chunk.js:54775:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:5897:74)
        at Module../src/calculations/moduleCalc0.js (http://localhost:3000/static/js/main.chunk.js:6104:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:37915:84)
        at Module../src/components/Forecaster/index.js (http://localhost:3000/static/js/main.chunk.js:38243:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:47062:82)
        at Module../src/components/Root/Root.dev.js (http://localhost:3000/static/js/main.chunk.js:47396:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Object.<anonymous> (http://localhost:3000/static/js/main.chunk.js:47779:20)
        at Object../src/components/Root/index.js (http://localhost:3000/static/js/main.chunk.js:47855:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Module.<anonymous> (http://localhost:3000/static/js/main.chunk.js:51422:74)
        at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:51577:30)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at fn (http://localhost:3000/static/js/bundle.js:151:20)
        at Object.1 (http://localhost:3000/static/js/main.chunk.js:57861:18)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:852:31)
        at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
        at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
        at http://localhost:3000/static/js/main.chunk.js:1:79

I have a module doing all the imports and re-exporting all the named exports that I made to try preventing cyclic references, and I moved the location of the import of the module with the calculationEntry function, to see if it made a difference. It did not. So I need some help in how to use this debug dump to track down this TDZ exceptions problem.

Answer 1

The problem exists because the function was declared as an arrow function. So it is declared but not initialized. The compilation phase is hoisting this uninitialized variable in the temporal dead zone which causes the TDZ exception. Changing the function declaration to "function calculationEntry() {...}" solves the problem.