5

The VSCode debugger always shows imports as undefined even when they're clearly not, why does it do this and is there a way I can fix it?

In below example, the variable "Lot" is imported and is not undefined as is demonstrated by the result of the console.log line, however when I manually type in "Lot" in the debugger it says it's undefined.

Screenshot with debugger and code

Code from example:

import Lot from '../db/models/Lot'

console.log(Lot === undefined) // prints false
console.log("break") // Debugger stopped at this breakpoint shows Lot as undefined

If I assign Lot to a local variable then it works:

const Lot2 = Lot
console.log("break") // Debugger stopped at this breakpoint shows Lot2 as defined
Alex Long
  • 261
  • 2
  • 5
  • Did you ever figure this out? I also see this exact behaviour, I had it with some other variables too in my post here: https://stackoverflow.com/questions/65932801/error-object-in-vue-async-catch-block-is-undefined-in-debugger – A_L Feb 01 '21 at 13:30
  • Nope, sorry. I just use the hack I described above if I know I need access to an import while debugging, i.e. I assign it to a local variable. – Alex Long Feb 02 '21 at 17:27

1 Answers1

4

I found out something about this: in the Closure section of the debugger window, you should find your imported module has _1 after its name, then you would access it with Lot_1.Lot.

This post suggests that this happens when the compilerOptions is below ES6

James
  • 56
  • 3
  • Ahh thank you, that was a great help. For me, `import { Instance } from …` landed within the Closure section as `_instance.Instance`. (we're using knex among other things in my app). ie. Prefixed with an underscore, and lowercased at the start (rather than adding `_1` after the name) – samjewell Nov 02 '21 at 14:04