Why can't external variables referenced in react see values in the debug environment?

scene

for example, I define a constant file, and in another component reference, it is clear that the constant works, but in the debug tool, why is the introduced constant value undefined,?

code

//constant.js
const Names={man:"zhangsan",woman:"xiaoli"}

export {Names}



//MyComponent.js
import {Names} from "./constant.js"

...

componentDidMount(){
debugger;
}

Action

Open the debugging tool. When you enter didMount, you can use the mouse to look at the value of Names. The undefined, prompt is undefined.
but it"s really okay to use it in your code.

is not just a constant, all import values are invisible.

Javascript react.js import

Apr.07,2021

import {Names} from'. / constant.js'
step 1. During import, webpack calls the _ _ webpack_require__ method to put the module (constant) cache in installedModules, as shown in figure

constant.js

index.js constant_constant,Names_constant,Names referenceError

this applies to all module caches that import, will import, assigning values to new variables when used, and all imported methods or variables become an attribute of the new variable, so there is no scope

isn't it good to allocate memory space when needed to save space?
give it a try, and you can see the details by adding a console.log (Names), mouse.

the building owner problem can be simplified to: under the debugger, why the value of the following b is undefined.

; (function() {
    var b = 2; (function() {
        debugger
    })()

})()

Previous: Achieve dynamic loading of more data and control the location of more buttons at the bottom of the page?

Next: The mpvue textarea input box is blocked by the keyboard