Basic Builds with Webpack - Using Loaders Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

[bitclaw]

In order to avoid the error Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode we should change the login code to the following:

"use strict";
let login = (username, password) => {
    if(username !== 'admin' || password !== 'radical'){
        console.log('incorrect login!');
    }
};

login('admin' , 'idunno');

[craigdmckenna]

I didn't add the "use strict"; statement to login.es6. It seems that babel-loader is automatically inserting it.

Here are the last few lines of my bundle.js:

/* 3 */
/***/ function(module, exports) {

    'use strict';

    var login = function login(username, password) {
        if (username !== 'admin' || password !== 'radical') {
            console.log('incorrect login');
        }
    };

    login('admin', 'wrongPassword');

/***/ }
/******/ ]);

Granted, I may not be using the same version as Joe.

[joeeames]

so is that error being thrown while following the course?

[bitclaw]

Hi @joeeames ! Yes that's right. BTW loved the course!

[joeeames]

does it show up in the course itself, in the videos, or just when following along?

On Fri, Oct 30, 2015 at 2:17 PM, Daniel Chavez notifications@github.com wrote:

Hi @joeeames https://github.com/joeeames ! Yes that's right. BTW loved the course!

— Reply to this email directly or view it on GitHub https://github.com/joeeames/WebpackFundamentalsCourse/issues/1#issuecomment-152538141 .

Joe Eames Software Craftsman

[MBing]

@joeeames It shows up when following along, but there are different versions than the ones on the course, I have tested the same code with the versions from the course and all works without the need of adding "use strict"; anywhere.

But since babel 5 is deprecated, a lot of people might run into this same problem.

These are my dev dependencies where I needed to put the "use strict"; in the beginning of login.es6:

"devDependencies": {
    "babel-core": "^6.1.4",
    "babel-loader": "^6.1.0",
    "jshint": "^2.8.0",
    "jshint-loader": "^0.8.3",
    "node-libs-browser": "^0.5.3",
    "webpack": "^1.12.4"
  }

TL:DR The solution @bitclaw provided will work when using newer versions as devDependencies. If you follow along the course and use the exact same versions as mentioned in the course, you will not run into any problems. I noticed babel-loader 5 was automatically adding "use strict"; as @CraigMcKenna mentioned, apparently they dropped this in the newer version.

[joeeames]

ok, the readme file for this repo has the directions to work correctly around this issue while using the latest version of Babel. Please look at that, let me know if you have any issues. Also, an update has been submitted to the course videos, although it can take as long as a month to get published.