Below is my code:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1 id="message"></h1>

<script src="traceur/traceur.js"></script>
<script src="traceur/BrowserSystem.js"></script>
<script src="traceur/bootstrap.js"></script>
<script type="module">

    var x = 'outer scope';
    (function() {
        console.log(x); //Expected undefined, got undefined ! this is as expected.
        var x = 'inner scope';
    }());

    //same as above, but changed to var to let and x to y
    let y = 'outer scope';
    (function() {
        console.log(y); //Was expecting ReferenceError here, but got undefined. WTF ??!!!
        let y = 'inner scope';
    }());

</script>

</body>
</html>

```

Its seems the temporal drop zone (TDZ) in es6 should throw a referenceError in case the let-var is used before it is declared. 

However, in this example, I am getting undefined for let.
Where am i going wrong?

Been at this problem for a long time and wasted a day on this. (Any pointers would be very help). I am using Chrome v58. 

v58 has es6 compatibility as per <https://kangax.github.io/compat-table/es6/> under current browser).

I stripped off the traceur part and posted on babel-try it out, and got the same result. [![enter image description here](https://i.stack.imgur.com/OdbXr.png)](https://i.stack.imgur.com/OdbXr.png)

Am wondering why is it not working in my chrome v58. Maybe it requires something else too??