karma-webpack doesn't seem to like const and let in my source files

[parky128]

I have hit an issue where a custom node package I have written appears to not want to play nicely with karma-webpack.

The entry file to this node module contains the following:

const MyModule = require('./src/index.js');

const myModule = new MyModule();

module.exports = {
  doStuff: myModule.doStuff,
  doOtherStuff: myModule.doOtherStuff
}

I am using angular-cli, and when running the `test script, I get the following error:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Expected an identifier but found 'MyModule' instead
  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:102

I changed const to var in my node module, and the error goes away.

Oddly, I do not get this error when running the default start task to serve up my app locally either.

So I'm unsure what's going on here when karma-webpack attempts to compile my source. I'm wondering if I'm missing something in my karma config?

[matthieu-foucault]

Can you share your karma config? That will help to figure out if you're missing something 😉

[parky128]

Sure, my karma config is:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
        require('karma-jasmine'),
        require('karma-phantomjs-launcher'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma')
    ],
    client:{
        clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
        { pattern: './src/test.ts', watched: true },
        { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css' }
    ],
    preprocessors: {
        './src/test.ts': ['@angular/cli']
    },
    mime: {
        'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
        reports: [ 'html', 'text-summary' ],
        fixWebpackSourcePaths: true,
        'report-config': {
            'text-summary': {
                file:  "coverage.txt"
            }
        }
    },
    angularCli: {
        config: './.angular-cli.json',
        environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
        ? ['progress', 'coverage-istanbul']
        : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    browserNoActivityTimeout: 60000 * 15,
    reportSlowerThan: 1000
  });
};

Thanks

[matthieu-foucault]

You are not using karma-webpack at all here. Look at the README of this repo, it describes how to use karma-webpack: you need to add it as a preprocessor, and include a webpack config.

[parky128]

Hmm ok, I saw _karma_webpack_ in the error output which made me think it was to do with this