3

Using the standard Create React App setup, when I debug in Chrome my import {moduleA} from './lib' variables are undefined in the debugger (eg: mouse hover over variable produces nothing; variable is not listed in locals, can't access in console), but the runtime can access it (ie console.log(moduleA) prints the module object). Is there a way to get access to them in the debugger?

Research

  • Looks like it might have something to do with how Babel compiles modules. Not sure why it doesn't produce source maps though? Seems like I could eject the app and try to replace all Babel usage with Typescript. But still strikes me as odd that this is even an issue and makes me suspicious I'm missing something obvious.

Example

console.log(moduleA) will log the module to the console, but moduleA does not exist in locals nor can it be accessed in the console.

moduleA console logging works

Guessing that webpack renames the import {moduleA} from './lib'; to _lib__WEBPACK..., but confused why there isn't some sort of source map for this back to import variable moduleA?

module missing in locals

moduleA import variable also unavailable in console

module not available in console

Angular Reference

This seems to work in Angular (using just ng new and adding and importing a lib.ts, not sure what the difference is: enter image description here

David Faivre
  • 2,302
  • 3
  • 23
  • 25
  • Related: https://stackoverflow.com/questions/30161123/es6-module-import-is-not-defined-during-debugger - but the answer seems to be "use the webpack module name and assign it to your variable name". I was hoping to have it work directly (like the Angular example). – David Faivre Dec 20 '20 at 20:54
  • Related, but no answer: https://stackoverflow.com/questions/42016317/imported-variable-works-but-is-not-defined-when-accessed-in-debugger-within-sam – David Faivre Dec 20 '20 at 20:56

2 Answers2

1

You might have a circular dependency, as found in this answer. You should try using this plugin to detect circular dependencies.

PoolloverNathan
  • 148
  • 2
  • 11
Erez Mizrahi
  • 197
  • 6
0

I encountered a similar issue a while back, I switched from CreateReactApp to Vite(which doesn't use webpack) and it was fixed. If you don't get any solution and if its a new project then try switching to Vite.

Varun S Athreya
  • 113
  • 2
  • 6