ES6 pitfalls and potential danger zones with babel & webpack

0.ES6-issues.md

ES6 issues

Just a bunch of examples of errors that are potentially hard to find and that eslint does not break on

1. Temporal dead zones
2. Cyclic dependencies

1.strict-dead-zones.js

// simple example with no issues but that generate runtime exception 
// solution is to redefine bar as a old fashioned function that gets hoisted

'use strict'; // added by babel

foo();

// not hoisted
const bar = () => 'hey from bar';

// hoisted
function foo(){
  console.log(bar()); // Exception
}

2.webpack-circular-deps.js

// this three file setup while having cyclic dependencies
// crash at runtime with no warnings etc from webpack

// a.js
import {init} from './b.js'
init();

// b.js
import {someUtil} from './c.js'

export const someConfig = 'a-really-important-string';
export const init = () => console.log('init!');

// c.js
import {someConfig} from './b'

let localThing = someConfig + 'random-string';
export const someUtil = (x) => x/2;

// Webpack execution
/**
 * 1. require a.js
 * 2. execute a.js
 * 3. require b.js
 * 4. execute b.js
 * 5. require c.js
 * 6. execute c.js
 * 7. require b.js and get empty exports
 * 8. fatal exception
 */