ecmascript-6,webpack,javascript-debugger,babeljs , ES6 module import is not defined during debugger

ES6 module import is not defined during debugger


Tag: ecmascript-6,webpack,javascript-debugger,babeljs

While playing around with Babel and Webpack I stumbled into some really weird behavior today.

I threw a debugger in my main.js to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not defined. I try console logging the same module instead, and I see it printed to my console.

What gives? I've pasted the relevant code snippets below:


import Thing from './Thing.js';

debugger // if you type Thing into the console, it is not defined

console.log(new Thing()); // if you let the script finish running, this works


class Thing {

export default Thing;


var path = require('path');
module.exports = {
    entry: './js/main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    module: {
        loaders: [
            { test: path.join(__dirname, 'js'), loader: 'babel-loader' }


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

If we look at the code generated from

import Thing from './Thing.js';


console.log(new Thing());


'use strict';

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

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

var _ThingJs2 = _interopRequireDefault(_ThingJs);


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

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


Unit testing with Karma on an Angular 1.3/JSPM/Babel project

So I'm setting up an angular 1.3 es6 project using jspm and babel. Im using es6's import/export feature. I have karma and karma-jspm installed and can run basic tests without an issue. When I try to import one of my modules into a test to test it, I get an...

Why should I use ES6 classes? [closed]

I have many question about ES6 classes. Since i understand how to use function and WebComponent, React & so. I didn't see many benefit using it. I wonder what's the benefit of using classes. I read that public/private/static will be part of ES7. So i see no point using it...

Explanation of `let` and block scoping with for loops

I understand that let prevents duplicate declarations which is nice. let x; let x; // error! Variables declared with let can also be used in closures which can be expected let i = 100; setTimeout(function () { console.log(i) }, i); // '100' after 100 ms What I have a bit...

Using String.raw() with Node JS

I'm working on a Node.js app with and I would like to use String.raw() which is part of the ES 6 standard. However, when using it as in the documentation: text = String.raw`Hi\n${2+3}!` + text.slice(2); It returns SyntaxError: Unexpected token ILLEGAL for the character after String.raw. I think that there...

ECMAScript class

I have the following code which when the web page loads should print the car make and current speed to the console. Nothing is printed to the console. If I put the new object declaration inside a function it does print either. <!DOCTYPE html> <html> <head> <script type="application/ecmascript;version=6"> class Car...

Karma tests reporting fast runs, but actually running slow

This is best explained with a video (or see the gif below): You'll notice that the Karma progress reporter is reporting that the tests are taking milliseconds, but it's obviously taking quite a while... I tweeted about this and was told to Try opening the debug page, and open the...

Dynamic key in immutability update helper for array

javascript,reactjs,ecmascript-6 I have an update function that receives an index along with the event so as to alter the value for that specific item in the array. How do I get index to be evaluated instead of treated as a set key in this scenario? Is it even possible? updateValue:...

How do I support jasmine and es6 syntax in Visual studio Code?

Question where can I find and how do I add support for jasmine and es6 syntax in Visual studio code? ...

Sass loader not working in webpack

I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command: ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer...

Symbol.for(string) in ECMAScript 6

It took me a while but I finally figured out what the purpose of symbols in ECMAScript 6 is: avoiding name collision when attaching properties to shared objects - HTML elements e.g. (In case you're stuck on the same question, I recommend this article.) But then I stumbled upon Symbol.for()....

ServiceWorker and Push Notification Payload

Community: ServiceWorker is a great advance technology in terms of cache managment, but I have some questions associated with other operations such as: Push Notification: I made a GCM integration (Google Clud Message) and NodeJS, following this article, the problem is that when GCM sends the information to the client...

Webpack: Create a bundle with each file in directory

I am trying to bundle every angular module in webpack. My target is to have one app.js that will be bundled by webpack with this configuration: entry: { app: "./app/app.js" }, output: { path: "./build/ClientBin", filename: "bundle.js" }, I will place this bundle script in my index.html so it will...

ES6 destructuring, dynamic assignment [duplicate]

This question already has an answer here: object destructuring without var 1 answer let text, value; if (typeof f == 'string') { text = value = f; } else { let { text, value } = f; } Doing this creates two new vars (from the else), however if...

Writing the most basic Unit test in Angular 2?

Problem: As soon as I import Angular 2 into a file none of my tests execute. Question: How can I set up my karma config to support angular two so my test pass properly? OR Question: How can I set up any testing framework with angular2 written in es6? Git...

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack

I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

Include paths for imports in babel using webpack

Given a directory structure such as: project ├───common │ └───js └───src └───js is there any way to add import paths to webpack so that a script inside src/js can resolve code inside common/js if it cannot find anything else locally? Something like the code below would include common/js/CommonClass.js: import CommonClass...

IntelliJ/Webstorm not finding import reference

I have the following project structure: root src scripts main.js foo.js Inside of my main.js file, I'm importing foo.js like so: import 'src/scripts/foo.js' When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go....

React components as plain JS objects?

Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method. Maybe you have some examples of factory functions or similar to share? Thanks!...

How do I load SVGs directly in my React component using webpack?

I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

How to properly bind current object context in ES6 using babelify

I'm trying to bind current instance to the class method, please note ES6 syntax. class SomeClass { search() => { ... } } Which is 100% legit code, however babelify doesn't want to compile it SyntaxError: /Users/vladmiller/Projects/test/test/client/test/app/pages/Search.react.js: Unexpected token (50:26) while parsing file: /Users/vladmiller/Projects/test/test/client/test/app/pages/Search.react.js\ Instead now I have to bind...

ES6 read-only enums that can map value to name

I would like to define an enum-like structure in JS, but have two requirements: The values be read-only, i.e. no users can assign to them. The values (0, 1, 2, ...) can be mapped back into the names (as with Java's name method) The methods I know to create enums...

“Import” ES6 for Node

I want to use import from ES6 rather than require from common.js in Node. For some reason I thought import would work by default in Node. But looks like it does not. Is there some npm package i need to install for that to work?

ES6 Iterate over class methods

Given this class; how would i iterate over the methods that it includes? class Animal { constructor(type){ this.animalType = type; } getAnimalType(){ console.log('this.animalType: ', this.animalType ); } } let cat = = new Animal('cat') What I have tried is the following with no success: for (var each in Object.getPrototypeOf(cat)...

Angular 1.4 + ngNewRouter + ES6 : Cannot read property '$routeConfig' of undefined

I am currently trying to throw together a basic working example of an Angular 1.4 app written with both the new router as well as ECMAScript 6. I have been fiddling with this code non stop and I don't understand why I am getting the error that is being thrown:...

How to check if a variable is an ES6 class declaration?

I am exporting the following ES6 class from one module: export class Thingy { hello() { console.log("A"); } world() { console.log("B"); } } And importing it from another module: import {Thingy} from "thingy"; if (isClass(Thingy)) { // Do something... } How can I check whether a variable is a class?...

ES6: call class constructor without new keyword

Given a simple class class Foo { constructor(x) { if (!(this instanceof Foo)) return new Foo(x); this.x = x; } hello() { return `hello ${this.x}`; } } Is it possible to call the class constructor without the new keyword? Usage should allow (new Foo("world")).hello(); // "hello world" Or Foo("world").hello(); //...

how to correctly use promises to return 2 different results [duplicate]

This question already has an answer here: How do I access previous promise results in a .then() chain? 6 answers I am trying to use Promises in JavaScript using ES6 to return data from 2 methods from an object, which would in production call out to an endpoint. My...

How to let Webpack require a root node_module instead of an child package?

I have installed backbone and backbone.babysitter trough npm. When I use backbone in my scripts like this: import Backbone from "backbone"; It loads the installed backbone version 1.2.1. This works fine until I want to use backbone.babysitter. When backbone.babysitter loads it needs to add properties to backbone itself. But the...

ES2015 Babel String Interpolation not working with apostrophe (but does with double quotes)

I am using babel / grunt to learn some ES2015. According to this post there is no real difference in Javascript between single and double quotes. i.e. 'test' and "test". When trying string interpolation though, it seems there is an issue with babeljs (or more likely - me). What is...

Do I have to call super.componentDidUpdate in React?

In a subclass of React.Component, do I have to call super.componentDidUpdate from my componentDidUpdate method? Or is it done automatically? (I am trying to call it but there is an error message Cannot read property call of undefined)...

Aurelia update value of bound item in another class

I guess the question boils down how to i pass the instance of a property to another class. I have something like this: import timerClass from "./timer"; export class App { constructor() { this.timeLeft = 6; //<--- I want to update this new timerClass(this.timeLeft); } activate() { } } and...

Webpack Uglify plugin returns “Killed” on Ubuntu

On my remote server (Ubuntu 14.04 x64), whenever I try to uglify my bundles, the process simply returns "Killed". When I don't uglify, it's just fine. Has anyone run into this? When I do it on my local Mac, it's fine (although I just tested it and it took 1.4...

How to get a last element of ES6 Map without iterations?

How to get a last element of ES6 Map/Set without iterations(forEach or for of) pass through a full length of the container?

Is there any way to modify a Set data structure in iteration (ECMAScript 6)?

The Set object in ES6 has a forEach method, just like Array object does. Is there any way to modify the values when iterating over the Set object using the forEach method? For example: // Array object in ES5 can be modified in iteration var array = [1, 2, 3];...

Create a subset object, consisting of only some of the properties of an existing object

This is best explained by example. The following works in es6 to create an object consisting of some of the keys of an existing object: var o = {a:1, b: 2, c: 3} var {a, c} = o var subsetObj = {a, c} // will be: {a:1, c:3} There are...

can es6 class have public properties as well as functions?

All the examples of classes I see are class myClass{ constructor(){} someFunction(){} what I want to add is someObject {myvalue:value} } this doesn't seem to compile. An old fashioned object would be { somefunction: function(){} someProperty: {myvalue:value} } is this not possible in es6 classes?...

MongoDB Object key with ES6 template string

I'm trying to update an array in my collection with this: var str = "list.0.arr"; db.collection('connect').update({_id: id}, {$push: { `${str}`: item}}); This exact string works just fine if I do it like this: db.collection('connect').update({_id: id}, {$push: { "list.0.arr": item}}); This is to show that it works, but It's throwing an...

Sequential Loading Using Promises

I've got an array of asynchronous calls that I want to be called sequentially, meaning that I don't want to call the second promise until the first is complete, and so on. In the following example, I've got a loop that creates unique images on the fly and appends them...

Obj-C category/extension Swift in Javascript ES6

I'm looking to add methods to a class in Javascript ES6 without creating a subclass of it, in the same way with the categories in Objective-C or extensions in Swift. I didn't find any information about it. Any suggestion?...

ES6 - Convert from 'require' to 'import'

If the alternative to: var Foo = require('foo'); is: import Foo from 'foo'; What is the alternative to: var Bar = require('foo').batz Could it be: import {batz} from 'foo' ? ...

How does `this` work in default parameters?

So... ES6¹ (which happens to be standardized a few hours ago) brings default parameters for functions similar to those in PHP, Python etc. I can do stuff like: function foo (bar = 'dum') { return bar; } foo(1); // 1 foo(); // 'dum' foo(undefined); // 'dum' MDN says that the...

How to test if browser supports js ES6 Class? [duplicate]

This question already has an answer here: Javascript ES6 cross-browser detection 2 answers My js classes works fine in Chrome, but when I test in IE for example, the script fails as expected, giving an ugly syntax error. Is there someway to test if the clients browser can handle...

what is the most reasonable way apply webpack to a full-stack node app?

i've been studying up on webpack for a couple of weeks now, and i've seen many examples of front end setups, and probably just this one setup for a backend. i'm trying to setup a react app with a node back-end (e.g. express, koa, hapi, etc) where i would need...

Input validation setTimeout in ReactJS

I have a component that renders with className="error" or classname="" depending on whether the input is valid or not. This way in CSS I can simply do .error { background: red; }. The validity of the input is determined by the isValidNumber(..) function. However, right now the problem I'm having...

Mixins for ES6 classes, transpiled with babel

According to various sources (2ality, esdiscuss) one should be able to add mixins to classes: EDIT discovered that class methods are not enumerable so that cannot work. Edited the code below, but still no joy class CartoonCharacter { constructor(author) { = author; } drawnBy() { console.log("drawn by",; }...

Webpack imports-loader with messageformat and angular-translate

I'm having some difficulty making angular-translate-interpolation-messageformat play nice with the imports-loader for MessageFormat. I outline the issue in this issue. Copied: Even though the module is exposed using UMD (yay) it is actually using the global MessageFormat object here. This is forcing me to either expose MessageFormat onto window (which...

“Variable 'X' can be made constant”, what does 'constant' mean?

VStudio or ReSharper is giving me the suggestion below: What does constant mean in this scenario? If it's a constant in the current method scope, what's the purpose? Methods tend to be small and therefore it shouldn't give any advantage compared to be a regular var? Please enligten me...

Executing promises in sequence: understanding a claim made about this example code

I'm not looking for a solution for how to execute promises in sequence, I'm trying to understand the one given by a blog author: I am reading "We have a problem with promises" by Nolan Lawson, posted 18 May 2015. Under "Advanced mistake #3: promises vs promise factories" he has...

why obj={x,y} works in Chrome?

var obj = { type: 'data', x, y, data: []} Obviously this was my typo, {x,y} should have been {x:x, y:y}. But it does what I want, in Chrome, field x gets the value of a local variable x. But why does it work?...