tslint-loader@3.6.0 throws some warning with webpack 4 + vue-loader

[TaroKong]

Hello, I got some warning!

This is a part of my webpack.module.rules config:

{
  test: /\.(js|vue)$/,
  include: [resolve('src')],
  exclude: /node_modules/,
  enforce: 'pre',
  use: [{
    loader: 'eslint-loader',
    options: {
      formatter: require('eslint-friendly-formatter')
    }
  }]
},
{
  test: /\.tsx?$/,
  enforce: 'pre',
  exclude: /node_modules/,
  loader: 'tslint-loader'
},
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      ts: "ts-loader",
      tsx: "babel-loader!ts-loader"
    }
  }
},
{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    "babel-loader",
    {
      loader: "ts-loader",
      options: { appendTsxSuffixTo: [/\.vue$/] }
    }
  ]
}

Codes of the vue file is like:

<template>
  <div></div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})
export default class Banner extends Vue {
  public some: string = '';
}
</script>

The warning is like:

Module Warning (from ./node_modules/tslint-loader/index.js):
[5, 9]: statements are not aligned
[1, 1]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[13, 1]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[1, 1]: unused expression, expected an assignment or function call
[13, 1]: unused expression, expected an assignment or function call
[5, 14]: " should be '
[5, 8]: Missing semicolon
[5, 19]: Missing semicolon
[13, 10]: Missing semicolon
[5, 2]: missing whitespace
[3, 2]: missing whitespace
[2, 8]: missing whitespace
[2, 9]: missing whitespace
[5, 13]: missing whitespace
[5, 14]: missing whitespace
[5, 18]: missing whitespace
[13, 2]: missing whitespace

If i delete the config of tslint-loader, everything will be ok!

[Leconomy]

I have the same issues

[hilongjw]

same issue here, it need a custom parser option to handle the Vue SFC file

const vueParser = require('vue-parser')

module.exports = function(input, map) {
  this.cacheable && this.cacheable();
  var callback = this.async();

  if (!semver.satisfies(Lint.Linter.VERSION, '>=4.0.0')) {
    throw new Error('Tslint should be of version 4+');
  }
  var options = resolveOptions(this);
  if (/<script.*lang="ts".*>([\s|\S]*)<\/script>/.test(input)) {
    const _input = vueParser.parse(input, 'script', { lang: ['ts', 'tsx'] });
    lint(this, _input, options);
  } else {
    lint(this, input, options);
  }

  callback(null, input, map);
};

[dannyk08]

@hilongjw is there a sample app on how to get this middleware to work?

[martinko2009]

I have the same issue.
When I use vue sfc file , ts-loader will check the html in template tag, and css in style tag。
but I don't need ts-loader to check the html and css.
how can I do ?
@hilongjw

[winguse]

I have the same issue too. according to @hilongjw, I made a monkey patch to make it work by:

1. change webpack rule from:

        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(ts|vue)$/,
          loader: 'tslint-loader',
          exclude: /node_modules/,
        });

to

        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(ts|vue)$/,
          loader: './my-tslint-loader.js', // here
          exclude: /node_modules/,
        });

2. in project root, create my-tslint-loader.js:

const vueParser = require('vue-parser');
const tsLintLoader = require('tslint-loader');

module.exports = function(input, map) {
  const that = Object.assign({}, this, {
    async: () => {
      const cb = this.async();
      return function (err, _input, map) {
        cb(err, input, map);
      };
    }
  });
  if (/<script lang=(ts|"ts"|'ts')>([\s|\S]*)<\/script>/.test(input)) {
    const _input = vueParser.parse(input, 'script', { lang: ['ts', 'tsx'] });
    // throw new Error(_input)
    tsLintLoader.apply(that, [_input, map]);
  } else {
    tsLintLoader.apply(that, [input, map]);
  }
};

[ligarcia10]

@TaroKong did you figure out a workaround?