SyntaxError: Use of reserved word 'class'

[ptomaszi]

Issue description or question

Wallabyjs fails to use the babel compiler for any ES6 JavaScript files. It is used in a connection with the webpack and the webpack "babel-loader" has been removed from its configuration. I am getting the following error: SyntaxError: Use of reserved word 'class'

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./webpack.config.base');
var babel = require('babel-core');

var rules = webpackConfig.module.rules.filter(function (rule) {
    return (rule.loader != "awesome-typescript-loader" || rule.use !== 'babel-loader?presets[]=es2015');
});

webpackConfig.module.rules = rules;

var wallabyPostprocessor = wallabyWebpack(webpackConfig);

module.exports = function (wallaby) {
    return {
        files: [
            { pattern: 'node_modules/babel-polyfill/dist/polyfill.js', instrument: false },
            { pattern: "node_modules/angular/angular.js", load: true, instrument: false },
            { pattern: "node_modules/angular-mocks/angular-mocks.js", load: true, instrument: false },
            { pattern: "node_modules/ng-metadata/core.js", load: false, instrument: false },

            { pattern: "lib/di.core/**/*.js", load: false, instrument: false },
            { pattern: "src/app/**/*.js", load: false },
            { pattern: "src/app/**/*.ts", load: false },
            "!src/app/**/*spec.js",
            "!lib/di.core/build/*.js"
        ],
        tests: [
            { pattern: "src/app/**/*spec.js", load: false },
            "!src/app/portal/parties/**/*spec.js",
        ],
        compilers: {
            'src/app/**/*.js': wallaby.compilers.babel({
                babel: babel
            })
        },
        testFramework: "jasmine",
        postprocessor: wallabyPostprocessor,
        setup: function () {
            window.__moduleBundler.loadTests();
        },
        //debug: true
    };
};

webpack configuration file

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app: path.join(__dirname, 'src/app/main'),
        vendor: [
            'moment',
            'moment-timezone',
            'underscore',
            'angular',
            'angular-translate-loader-static-files',
            'bootstrap',
            'jquery',
            'toastr',
            'stacktrace',
            'valdr',
            'notify',
            'bootbox',
            'spin',
            'uri',
            'pikaday',
            'ng-file-upload',
            'jquery.browser',
            'plotly',
            'ngIdle',
            'angularModalService',
            'angular-clipboard',
            'reflect-metadata'
        ]
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    resolve: {
        alias: {
            'appModule': path.join(__dirname, 'src/app/app.module'),
            'appConfig': path.join(__dirname, 'src/app/_config'),
            'domReady': path.join(__dirname, 'node_modules/detect-dom-ready/lib/detect-dom-ready'),
            'moment': path.join(__dirname, 'node_modules/moment/min/moment-with-locales.min'),
            'moment-timezone': path
                .join(__dirname, 'node_modules/moment-timezone/builds/moment-timezone-with-data.min'),
            'underscore': path.join(__dirname, 'node_modules/underscore/underscore-min'),
            'angular': path.join(__dirname, 'node_modules/angular/angular'),
            'angular-translate-loader-static-files':
                path.join(__dirname,
                    'node_modules/angular-translate-loader-static-files/angular-translate-loader-static-files.min'),
            'bootstrap': path.join(__dirname, 'lib/bootstrap-custom/bootstrap.min'),
            'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery.min'),
            'toastr': path.join(__dirname, 'node_modules/toastr/build/toastr.min'),
            'stacktrace': path.join(__dirname, 'lib/stacktrace/dist/stacktrace.min'),
            'valdr': path.join(__dirname, 'lib/valdr/dist/valdr'),
            'notify': path.join(__dirname, 'lib/notifyjs/dist/notify'),
            'bootbox': path.join(__dirname, 'node_modules/bootbox/bootbox.min'),
            'spin': path.join(__dirname, 'node_modules/spin.js/spin.min'),
            'uri': path.join(__dirname, 'node_modules/urijs/src/uri'),
            'pikaday': path.join(__dirname, 'node_modules/pikaday/pikaday'),
            'ng-file-upload': path.join(__dirname, 'node_modules/ng-file-upload/dist/ng-file-upload-all.min'),
            'jquery.browser': path.join(__dirname, 'node_modules/jquery.browser/dist/jquery.browser.min'),
            'plotly': path.join(__dirname, 'node_modules/plotly.js/dist/plotly.min'),
            'ngIdle': path.join(__dirname, 'node_modules/ng-idle/angular-idle.min'),
            'boot': 'node_modules/jasmine-core/lib/jasmine-core/boot',
            'di.core': path.join(__dirname, 'lib/di.core'),
            'core.mocks': path.join(__dirname, 'lib/di.core.test/mocks/spa'),
            'app.mocks': path.join(__dirname, 'app.tests/mocks'),
            'testHelper': path.join(__dirname, 'lib/di.core.test/utility/testHelper'),
            'squire': path.join(__dirname, 'lib/squire/src/Squire'),
            'jasmine': path.join(__dirname, 'node_modules/jasmine-core/lib/jasmine-core/jasmine'),
            '$di': 'window.$di',
            'angularModalService': path.join(__dirname, 'lib/angular-modal-service/dst/angular-modal-service'),
            'angular-clipboard': path.join(__dirname, 'lib/angular-clipboard/angular-clipboard'),
            'ng-metadata/core': path.join(__dirname, 'node_modules/ng-metadata/core'),
            'reflect-metadata': path.join(__dirname, 'node_modules/reflect-metadata/Reflect')
        },
        //extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            { test: /angular/, use: ['exports-loader?window.angular'] },
            { test: /angular-translate/, use: ['exports-loader?angularTranslate'] },
            { test: /angular-local-storage/, use: ['exports-loader?angularLocalStorage'] },
            { test: /angular-ui-router/, use: ['exports-loader?angularUiRouter'] },
            { test: /bootstrap/, use: ['imports-loader?jQuery=jquery'] },
            { test: /valdr/, use: ['imports-loader?moment'] },
            { test: /notify/, use: ['imports-loader?jQuery=jquery'] },
            { test: /moment-timezone/, use: ['imports-loader?moment'] },
            { test: /pikaday/, use: ['imports-loader?moment'] },
            { test: /squire/, use: ['exports-loader?window.squire'] },
            { test: /jasmine/, use: ['exports-loader?window.jasmine'] },
            { test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/\.\/locale$/),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
            _: 'underscore',
            angularAnimate: 'angular-animate',
            angularUiRouter: 'angular-ui-router',
            angularTranslate: 'angular-translate',
            angularLocalStorage: 'angular-local-storage'
        })
    ]
}

ES6 file where it errors:

export const welcomeComponent = {
    templateUrl: 'src/app/welcome/welcome.html',
    selector: 'diWelcome',
    controllerAs: 'welcomeCtrl',
    controller:
        class WelcomeController{
            constructor(
            $stateParams,
            diState,
            validationInitialiser,
            validationRulesStore,
            userAuthenticationProxy,
            authenticationClientEventSubscriber
            ) {

The only reason I try to use the wallaby babel compiler is that when I use the webpack one, error messages for the spec files do not show in correct places in the Visual Studio.

[ptomaszi]

Additional issues found:

Error comments are in wrong places:

[ArtemGovorov]

Wallaby fully supports the scenario you've described. You may try this simpler sample to see if it is working for you.

I thinks the issue is in the config (causing both of the issues you've listed - with compilation and with error comments).

the webpack "babel-loader" has been removed from its configuration

It doesn't look like the loader is present at all in the webpack config that you have included. There' s no babel-loader in the rules that I can see.

Next, when you filter rules

var rules = webpackConfig.module.rules.filter(function (rule) {
    return (rule.loader != "awesome-typescript-loader" || rule.use !== 'babel-loader?presets[]=es2015');
});

with this condition, none of the loaders will be filtered out. You need to replace || with &&.

The only reason I try to use the wallaby babel compiler is that when I use the webpack one, error messages for the spec files do not show in correct places in the Visual Studio.

I'd still recommend using wallaby babel compiler for performance reasons, however you may use the webpack babel-loader, just need to use the correct source maps option as described in this docs section. I don't think it is an issue though, because as I pointed put, in your case there's no babel-loader at all in the current config.

Could you please share a sample GitHub repo project where I could reproduce the issue? No real code/tests is required, just the setup (webpack config, package.json, babelrc, tsconfig, etc), that ES6 file (even with just an empty export export const welcomeComponent = {}) and a test file importing the file. Once you publish the repo, I'll jump in and send you a pull request with a working config.

[ptomaszi]

I have created a sample project which can reproduce an error. The project can be found here:

https://github.com/ptomaszi/wallaby_webpack

In addition to the "class" error I also see "Missing tracer start subscription" error.

Please let me as soon as you can, what is the issue, so I can progress with my project.

[ArtemGovorov]

Thanks, however I was hoping you create a sample project closer to your setup rather than taking our sample project (because that would be the fastest way for you to apply changes in your real project), but anyway - whatever works best for you.

I created the pull request to make it work.

the "class" error

You didn't have any babel config and babel by default does nothing, so I added the required preset and the .babelrc file.

I also see "Missing tracer start subscription" error.

This is because you didn't set load: false to files and tests as described here in the docs.

Also fixed a couple more smaller issues in the config.

Hope it helps.

[ptomaszi]

Thanks for your help. It works now!

[ArtemGovorov]

Awesome, thanks for the update!