Fork-ts-checker-webpack-plugin: Vue SFC support not working

[kevinmarrec]

Current behavior

createTypeScriptReporter from TypeScriptReporter, which seems to be the only file that calls createTypeScriptVueExtension (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/master/src/typescript-reporter/reporter/TypeScriptReporter.ts#L37), which itself should provide the .vue (Vue SFC) support, is never imported or called.

I think ForkTsChecker uses a TypeScriptRpcClient reporter over the one with Vue SFC support.

Expected behavior

createTypeScriptVueExtension is called and provides .vue (Vue SFC) support.

Steps to reproduce the issue

• Setup a Vue project with README Vue section instructions
• Intentionally have TS errors in .vue files (wrong types ex: const x: string = 2)
• Run a project which uses ForkTsChecker

Environment

• fork-ts-checker-webpack-plugin: 5.0.1
• typescript: 3.8.3
• eslint: 7.1.0
• webpack: 4.43.0
• os: Ubuntu 20.04

[piotr-oles]

It's not true - it's passed to the registerReporterRpcService https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/1f3d82fe9364e0f8e9e7cc9b3c98870de4be854c/src/typescript-reporter/reporter/TypeScriptReporterRpcService.ts#L9 and then called on configure call. As this plugin runs reporter in a separate process, it uses RPC client and service to communicate between processes. That's why there is no direct call - only a remote call via RPC client.

Could you share your configuration or create a reproduction repository? We have an end to end tests for Vue support so it's more likely a configuration issue.

[kevinmarrec]

I'm gonna check the tests to see If I can find what i'm doing wrong but overall I'm trying to upgrade the plugin for Nuxt TypeScript support : https://github.com/nuxt/typescript, from v4 to v5.

I've created a branch : https://github.com/nuxt/typescript/tree/fork-ts-checker-webpack-plugin-v5
You can see comparison here : https://github.com/nuxt/typescript/compare/fork-ts-checker-webpack-plugin-v5?expand=1

I've intentionnally put a type error in test/fixture/pages/index.vue.

Reproduction steps :
yarn && yarn build
then
yarn nuxt-ts packages/typescript-build/test/fixture

With v4 I got the error, with v5 I don't.

[davodesign84]

We are experiencing a similar issue to the one @kevinmarrec is experiencing, on our setup (Rails + Webpacker + Vue2 + Typescript 3.9+).

Sample config:

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const environment = require('./environment');
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const fork = new ForkTsCheckerWebpackPlugin({
  typescript: {
    extensions: {
      vue: true
    }
  }
});

# Some options seem to throw an error when added to the constructor
fork.vue = true; 
fork.tsconfig =path.resolve(__dirname, '../../tsconfig.json');
fork.async = true;
fork.memoryLimit = 8192;

environment.plugins.append(
  'ForkTsCheckerWebpackPlugin',
  fork
);


const config = environment.toWebpackConfig();

environment.loaders.append('js', {
  test: /\.js$/,
  use: ['source-map-loader'],
  enforce: 'pre'
});

environment.loaders.append('ts',       {
  test: /\.ts$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
    transpileOnly: true
  }
});
module.exports = config;

Errors in *.ts file break the compilation, while errors in *.vue files don't. With V4 we have a fully working setup.

[kevinmarrec]

@davodesign84 I've been debugging multiple hours on this and still haven't found any clues, so yeah I'm really suspecting there's either an issue with this new package version or some configuration guideline we're missing to make it work.

EDIT : Maybe it could be worth trying some of old alpha/beta stages of 5.x to see if the issue has been there from the beginning in 5.x or if it has been something breaking during these alpha & beta stages.

[piotr-oles]

The issue is that this plugin doesn't add .vue files to the root files of the project. So in order for it to work, you need .ts or .tsx entry file which imports .vue file. It's a bug - I will fix it.

[piotr-oles]

:tada: This issue has been resolved in version 5.0.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[kevinmarrec]

@piotr-oles Can confirm it works again, thank you 💚

[piotr-oles]

Feel free to buy me a beer on GitHub Sponsors 😄

[clemp6r]

Hi @piotr-oles, I observe a similar problem with version 6.1.0 (using Vue CLI 5.0.0-alpha.8), am I missing something?

Errors are not detected in my TS vue component unless it is imported from another TS file.

UPDATE: "src/**/*.vue" was missing in my tsconfig.json "include" property. Now it works.