Unexpected token errors just in a few specific typescript files

glendaviesnz commented 6 years ago

Issue description or question

We have wallaby running with an Angular 5 CLI app, and mostly runs as expected, but we get some unexpected token errors just in a few typescript files related to the type annotations, eg.

Uncaught Error: Module parse failed: Unexpected token (7:49)
You may need an appropriate loader to handle this file type.
| import { BookViewState } from './book-view.reducer';
| 
| export const bookPageNumberSelector = (documentId: number) => {

the line numbers for the error relate to the :number type annotation. If all the type annotations are removed from the file the error goes away - but that of course upsets our noImplicitAny flag. The file has .selector.ts as the extension.

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
  require('./tsconfig.json').compilerOptions,
  require('./src/tsconfig.spec.json').compilerOptions);

compilerOptions.module = 'CommonJs';

module.exports = function (wallaby) {

  var webpackPostprocessor = wallabyWebpack({
    entryPatterns: [
      'src/wallabyTest.js',
      'src/**/*spec.js'
    ],

    module: {
      rules: [
        {test: /\.css$/, loader: ['raw-loader']},
        {test: /\.html$/, loader: 'raw-loader'},
        {test: /\.ts$/, loader: '@ngtools/webpack', include: /node_modules/, query: {tsConfigPath: 'tsconfig.json'}},
        {test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/},
        {test: /\.json$/, loader: 'json-loader'},
        {test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader']},
        {test: /\.less$/, loaders: ['raw-loader', 'less-loader']},
        {test: /\.scss$|\.sass$/, use: [
            {
                "loader": "raw-loader",
                "options": {
                    "sourceMap": false,
                    "importLoaders": 1
                }
            },
            {
                "loader": "sass-loader",
                "options": {
                    "sourceMap": false,
                    "precision": 8,
                    "includePaths": [
                        "./src/styles"
                    ]
                }
            }
        ]},
        {test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'}
      ]
    },

    resolve: {
      extensions: ['.js', '.ts'],
      modules: [
        path.join(wallaby.projectCacheDir, 'src/app'),
        path.join(wallaby.projectCacheDir, 'src'),
        'node_modules'
      ],
      alias: {
          '../../../assets/WebViewer.3.2.0/lib/WebViewer.js': path.resolve(__dirname, 'src/assets/WebViewer.3.2.0/lib/WebViewer.js')
      }
    },
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      dns: 'empty'
    }
  });

  return {
    files: [
      {pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false},
      {pattern: 'src/**/*.d.ts', ignore: true},
      {pattern: 'src/**/*spec.ts', ignore: true}
    ],

    tests: [
      {pattern: 'src/**/*spec.ts', load: false},
      {pattern: 'src/**/*e2e-spec.ts', ignore: true}
    ],

    testFramework: 'jasmine',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript(compilerOptions)
    },

    middleware: function (app, express) {
      var path = require('path');
      app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
      app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
    },

    env: {
      kind: 'chrome'
    },

    postprocessor: webpackPostprocessor,

    setup: function () {
      window.__moduleBundler.loadTests();
    },

    debug: true
  };
};

Code editor or IDE name and version

Visual Studio Code v1.23.0

OS name and version

Windows

ArtemGovorov commented 6 years ago

It looks like the file is not being compiled by wallaby TypeScript compiler. Looking at your config, I can only see two scenarios why it could happen:

the file is being imported with the .ts extension, ie. as import ... from ./blah.selector.ts, as opposed to import ... from ./blah.selector,
or the file with the issue is not under src/**/*.ts.

If you create a simple test (src/a.spec.ts) file like:

import a from './blah.selector' // correct the path here, but not use .ts extension
it('should work', () => {
  comsole.log(a)
})

and change your tests to

    tests: [
      {pattern: 'src/a.spec.ts', load: false}
    ],

then does it work?

glendaviesnz commented 6 years ago

Doh! it was the .ts on the import statement - well spotted. Thanks, this issue can be closed.

ArtemGovorov commented 6 years ago

Awesome, thanks for the update!

wallabyjs / public