FAQ Database Discussion Community


Extended Errors do not have message or stack trace

javascript,ecmascript-6,babeljs
When running this snippet through BabelJS: class FooError extends Error { constructor(message) { super(message); } } let error = new FooError('foo'); console.log(error, error.message, error.stack); it outputs {} which is not what I expect. Running error = new Error('foo'); console.log(error, error.message, error.stack); produces {} foo Error: foo at eval (eval at...

Generating both browserify output & System.register() modules from ES6 modules?

browserify,ecmascript-6,babeljs,traceur,systemjs
I have coded ES6 modules as per 2ality's final syntax example, without a .js suffix. I have as well organised the modules into a vendor/project directory hierarchy and module naming scheme as System.register() module format effectively places registered modules into the same namespace. The problem is as follows, if I...

ES6 module import is not defined during debugger

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...

Error: cannot find module when testing with mocha

javascript,node.js,ecmascript-6,babeljs
I'm using babeljs to write an RPG engine library. I have two files: dice.js import assert from 'assert'; import Random from 'random-js'; export default class Dice { constructor(maxNumber) { assert(typeof(maxNumber) === "number", "maxNumber must be a number"); this._mt = Random.engines.mt19937(); this.minNumber = 1; this.maxNumber = maxNumber; } makeThrow() { this._mt.autoSeed();...

Transpile ES7 Async Await with Babel.js?

javascript,babeljs,ecmascript-async-await,ecmascript-7
ES7 will be introducing C# style async-await. I know Babel.js transpiles ES6 to ES5, but is there any way to make it transpile async-await to ES5?

Importing CSS files in Isomorphic React Components

javascript,reactjs,webpack,babeljs
I have a React application with Components written in ES6 - transpiled via Babel and Webpack. In some places I would like to include specific CSS files with specific Components, as suggested in react webpack cookbook However, if in any Component file I require a static CSS asset, eg: import...

Babelify ParseError on import module from node_modules

javascript,node.js,browserify,ecmascript-6,babeljs
I'm using ES6 with Babelify and CommonJS module formatter. And I using ES6 style module features with node's module system. So, I'm going to put in all my own modules in node_modules/libs folder. test.js in [ node_modules/libs ] export default function() { console.log('Hello'); }; main.js (will compile to bundle.js) import...

babel/6to5 - duplicated code when exporting modules

gulp,amd,ecmascript-6,ecmascript-harmony,babeljs
I'm using Babel to transpile ES6 to ES5 and it works great. The only problem is that once transpiled each module duplicates these lines: var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null)...

`Invalid mapping` error trying to use babel require hook and polyfill with react jsx transpile

source-maps,react-jsx,babeljs
I'm trying to use babel for both ES6 and JSX transpilation for mocha tests. Suppose we have test.jsx like this: var React = require("react"); React.createClass({ render: function(){ return (<div>Hello World</div>); } }); Running babel test.jsx gives us valid transformed code. No problem. I would expect that if I create a...

Include paths for imports in babel using webpack

ecmascript-6,webpack,babeljs
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...

gulp watch with babel then pm2 restart

javascript,gulp,watch,pm2,babeljs
\Hey guys I'm totally stuck with this one. Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load...

is it possible to use TypeScript and Babel together

javascript,typescript,babeljs
I am new to both TypeScript and Babel. I have researched both and found they have features the other does not have. I'd like get the best of both world by using TypeScript to organize my code then use babels ES6 features like asyc/await and others. Is this possible.

ES6 Classes: Wrap method implementation in another function

javascript,ecmascript-6,babeljs
Trying to figure out the syntax for doing something like this using ES6 classes: function Component() { } Component.prototype.render = style(function() { }); This is what I have so far: class Component { constructor() { super() } render style(() { }); } Any ideas?...

`Map` returns empty object with BabelJS

node.js,ecmascript-6,babeljs
I'm trying to run following code with BabelJs: var m = new Map(); m.set('a', 'b'); m.set('b', 1); m.set('c', { a: 12 }); console.log(m); console.log(typeof m); But I get an empty object from babel-node as a result: {} object What's the problem? ...

How to compile a project properly with Babel and Grunt

javascript,gruntjs,babeljs
I'm trying to play with Babel, but it doesn't work well for me. My project is simple |-project/ |---src/ |-----index.html |-----main.js |-----module.js |---Gruntfile.js |---package.json index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Test</title> <script src="main.js" type="application/javascript"></script> </head> <body> <p>Simple html file.</p> </body> </html> main.js import * as math from "./module";...

await on an ES7 async function called with call or apply with Babel

javascript,babeljs,ecmascript-async-await,ecmascript-7
How do I await on ES7 async function called with call or apply with Babel? Below is an example, where getOrders is an async method of a Service class: class Service() { async getOrders(arg1, arg2, arg3) { return await this.anotherService.getOrders(arg1, arg2, arg3); } } let service = new Service(); //...

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

javascript,ecmascript-6,babeljs
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...

Writing a promise to work with a callback that passes two arguments

javascript,promise,web-sql,babeljs
In a recent cordova app at work, we used the WebSQL api, as it gave us the device support and functionality needed to store data locally. We're going to use it again for an upcoming project, so I started exploring promises with implemented in core.js, using BabelJS. edit added link...

How to use ECMAScript6 modules within webpages

javascript,ecmascript-6,babeljs
I'm pretty excited about using ECMAScript 6 features now via Babeljs - in particular, I'd love to start making my JavaScript code more modular using the new modules feature. Here's what I've written so far: // ECMAScript 6 code - lib.js export const sqrt = Math.sqrt; export function square (x)...

RegeneratorRuntime is not defined

javascript,karma-runner,babeljs,karma-babel-preprocessor
I am trying to run Karma-babel-preprocessor and a straight forward ES6 generator: //require('babel/polyfill'); describe("how Generators work", function() { it("will allow generator functions", function() { /*function * numbers() { yield 1; yield 2; yield 3; };*/ let numbers = { [Symbol.iterator]:function*(){ yield 1; yield 2; yield 3; } } let sum...

Using a Decorator to get list of implemented interfaces

typescript,aurelia,babeljs,typescript1.5,es7
Do you know if it is possible to get the array of interfaces implemented by a class using a decorator: interface IWarrior { // ... } interface INinja { // ... } So If I do something like: @somedecorator class Ninja implements INinja, IWarrior { // ... } At run-time...

What is the correct (spec-wise) behavior of `yield* undefined` & `yield undefined` in ES6?

yield,ecmascript-6,babeljs,traceur
While trying to understand how to work with KoaJS (question), I came to realize that yield* undefined behaves differently between babel & traceur. Babel seem to ignore the statement, while traceur throws an exception. A sample can be seen here: Babel - Traceur. I tried looking it up in the...

ES6 shorthand object key checking

javascript,ecmascript-6,babeljs
Curious to know if there's any part of ES6 that makes these kind of checks a little more concise: componentWillReceiveProps(nextProps) { if(nextProps && nextProps.filterObj && nextProps.filterObj.area){ // go ahead } } ...

What's this “_function: while” syntax in Babel.js tail call?

javascript,babeljs
Recently I'm looking at Babel.js (previously 6to5). It's a transpiler for ES6. One interesting functionality it provides is to change tail calls to loops. In the example: function factorial(n, acc = 1) { "use strict"; if (n <= 1) return acc; return factorial(n - 1, n * acc); } //...

Can I run a Gulp task written in ES6 using Node?

javascript,node.js,gulp,ecmascript-6,babeljs
I'm using ES6 on Node through Babel. I can run ES6 scripts using a run-babel script. So, this will work: node run-babel build.js //build.js is written in ES6 But now I'd like to access one of these ES6 scripts from a Gulp task but Gulp runs on vanilla node. Is...

How to map JSON data to a class

javascript,ecmascript-6,babeljs
I created a ES6 class by Babel and I want to map JSON data which is gotten from a server to the ES6 class. Is there anything common way to do that? User.js export default class User { constructor() { this.firstName; this.lastName; this.sex; } } app.js import User from "./classes/User";...

aurelia, es6 and classname case

ecmascript-6,babeljs,aurelia
I'm studying custom components in aurealia and come accross strange behaviour which nature I don't understand. Consider this: component: xxxaaa.html <template> <div>xxxxxx</div> </template> xxxaaa.js: export class Xxxaaa {} app.html: <template> <import from='./xxxaaa'></import> <div> <xxxaaa/> </div> </template> this works as expected, xxxxxx is shown. Then, camelcaseing component: xxxAaa.html: content not changed,...

Why “babel-node” spins 2 processes?

node.js,babeljs
I have the following script in my package.json: "scripts": { "start": "babel-node app" } When I run npm start and then ps aux | grep node, I see 2 processes running: mishamoroshko 18102 58.9 4.2 3173444 174656 s001 S+ 2:37pm 0:03.18 node /Users/mishamoroshko/my-project/node_modules/babel/bin/_babel-node app mishamoroshko 18101 0.0 0.4 3045884 15488...