Fork-ts-checker-webpack-plugin: [vue] `src` attribute on script block is not resolved

[ktsn]

Looks like src attribute on <script> block in Vue SFC is not handled by fork-ts-checker-webpack-plugin. For example, if we process the following .vue file:

<template>
  <h1>hi</h1>
</template>

<script lang="ts" src="./App.ts"></script>

It produces like the following error:

ERROR in **/src/main.ts
(2,17): File '**/src/App.vue' is not a module.

The complete reproduction is here.

FYI, if I only use ts-loader with type checking, it successfully compiled without errors.

original issue: https://github.com/vuejs/vue-cli/issues/1104

[rodhoward]

@ktsn could you expand on your work around with ts-loader?

I would really like to use the latest vue-cli with minimal modifications to make it easy to manage moving forward.

[ktsn]

@rodhoward I just removed ForkTsCheckerWebpackPlugin from webpack config and transpileOnly option of ts-loader. If you would like to work around with vue-cli plugin, you can modify webpack config on vue.config.js https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

[johnnyreilly]

I imagine it doesn't work with the fork-ts-checker-webpack-plugin is down to ts-loader not having appendTsSuffixTo functionality.

I imagine it could be ported across if someone was up for it.

[eyalsk]

Got the same issue myself, any progress on this?

[ascott18]

Webpack modifications worked for me too as suitable workaround for now. For vue-cli 3, I added the following to vue.config.js:

module.exports = {
  // ...
  chainWebpack: config => {
    config.plugins.delete('fork-ts-checker');
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => { return {...options, 'transpileOnly': false }});
  }
}

[johnnyreilly]

cc @prograhammer - our resident Vue expert 😄 (he added vue support to this plugin)

[ktsn]

I just made a PR to fix this issue #130