const keyword breaking PhantomJS

[mattxo]

Webpack appears to be outputting the const keyword instead of the var keyword which is breaking PhantomJS (as it doesn't support ES6 syntax).

...    
/* 2 */
/***/ function(module, exports, __webpack_require__) {    
    "use strict";
    const testing_1 = __webpack_require__(3); // const keyword breaking PhantomJS
    testing_1.describe('App', () => {
...

So PhantomJS reports

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'

The file in question (karma-shim.js) is being processed by the karma-webpack preprocessor

karma-shim.js

'use strict';

Error.stackTraceLimit = Infinity;
require('es6-shim');
require('angular2/bundles/angular2-polyfills.js');
require('angular2/testing');

var appContext = require.context('./src', true, /root\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('angular2/testing');
var browser = require('angular2/platform/testing/browser');

testing.setBaseTestProviders(browser.TEST_BROWSER_PLATFORM_PROVIDERS, browser.TEST_BROWSER_APPLICATION_PROVIDERS);

karma.conf.js

...
preprocessors: {
    './karma-shim.js': ['webpack', 'sourcemap']
},

webpack.config.js Is part of generator-ng2-webpack (https://github.com/cmelion/generator-ng2-webpack) but doesn't appear to mention transpilation.

[sokra]

It's not webpack that emits a const statement. Maybe you have some other preprocessor in place which emits it or the const is in the original file.

[mattxo]

Ah... I think you're right... the ts.config was targeting ES6! Thanks!

[pritishchandak]

add
compilerOptions {
"noEmitHelpers": true, // this need true for unit test
}
solves this problem

[joeheyming]

I had this issue. It was terrible. The problem for me was that a loader test regex was too permissive and basically the expose loader was running for files that shouldn't, which was injecting code with const. I was not seeing this issue when running karma with Chrome, because Chrome supports const. But when you run it in Phantomjs, 'const' isn't supported.

Once I locked down the regex to match the exact file, the problem went away

[damiangreen]

@pritishchandak did you need to install ts-helpers?
@joeheyming can you clarify?
@mattxo what di you target instead? es5?

[joeheyming]

I had a rule:

{ test: /jquery/ }

This matched any file with jquery in it. Turns out we had a file with jquery in the path:
e.g. some/dir/jquery/main.js
Which got matched, then exposed on the window!

So I updated the test to match:
{ test: /jquery.js$/ }

I did the same with bootstrap.js.