ES6 module import is not defined during debugger

tl;dr: Babel does not necessarily preserve variables names.

---

If we look at the code generated from

import Thing from './Thing.js';

debugger;

console.log(new Thing());

namely:

'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _ThingJs = require('./Thing.js');

var _ThingJs2 = _interopRequireDefault(_ThingJs);

debugger;

console.log(new _ThingJs2['default']());

We see that Things is not defined indeed. So Chrome is correct.

In some debugging scenarios, it may be sufficient to assign the imported variable to a new variable in local scope. For example:

import Thing from './Thing.js';
const TestThing = Thing;

debugger; // although Thing will not be defined, TestThing will be defined

console.log(new TestThing());

This doesn't fix the core issue at hand, but it can be a workaround for debugging in certain situations.