Ts-loader: Module resolution for `.vue` files is not working inside `.vue` file

[piotr-oles]

Hi!
I'm an author of the fork-ts-checker-webpack-plugin.

I'm working on the rewrite of this plugin in this PR. I wanted to test .vue file support in the end-to-end test using the ts-loader. I was trying different configurations, starting from the configuration described in the ts-loader README. Unfortunately, I wasn't able to compile the project without errors. I'm not a Vue.js developer, so maybe I messed up something 😄

Expected Behaviour

When I have .vue file with <script lang="ts"> and this file imports another .vue file, the module should be imported properly.

<template>
  <logged-in v-if="user" :user="user" @logout="logout"></logged-in>
  <login-form v-else @login="login"></login-form>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import LoginForm from "./component/LoginForm.vue"; // this should work
import LoggedIn from "./component/LoggedIn.vue"; // this should work
import User from "./model/User";

@Component
export default class App extends Vue {
  public user: User | null = null;

  login(user: User) {
    this.user = user;
  }

  logout() {
    this.user = null;
  }
}
</script>

Actual Behaviour

The ts-loader loads .vue module from a .ts module, but can't load .vue module from another .vue module:

ERROR in /Users/oles/Projects/ts-loader-vue-sandbox/src/App.vue.ts
[tsl] ERROR in /Users/oles/Projects/ts-loader-vue-sandbox/src/App.vue.ts(9,23)
      TS2307: Cannot find module './component/LoginForm.vue'.

ERROR in /Users/oles/Projects/ts-loader-vue-sandbox/src/App.vue.ts
[tsl] ERROR in /Users/oles/Projects/ts-loader-vue-sandbox/src/App.vue.ts(10,22)
      TS2307: Cannot find module './component/LoggedIn.vue'.
ℹ ｢wdm｣: Failed to compile.

Steps to Reproduce the Problem

https://github.com/piotr-oles/ts-loader-vue-sandbox#steps-to-reproduce

Location of a Minimal Repository that Demonstrates the Issue.

https://github.com/piotr-oles/ts-loader-vue-sandbox

[appzuka]

Your minimal repo requires a local version of fork-ts-checker-webpack-plugin:

    "fork-ts-checker-webpack-plugin": "/Users/oles/Projects/fork-ts-checker-webpack-plugin/fork-ts-checker-webpack-plugin.tgz",

I tried running with the released version but got:

Error: When you use this plugin you must install `typescript`.

[piotr-oles]

Sorry, my bad. I've updated the reproduction repository, please try again :)

[appzuka]

The solution is at:

https://github.com/vuejs/vue-class-component/issues/219

Putting the following vue-shim.d.ts declaration file under my ./src directory solves the problem:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

[johnnyreilly]

Hey @piotr-oles!

Glad to see @appzuka has been good enough to help you out (it's worth saying I'm not a vuejs dev either ☺️)

[piotr-oles]

Thanks, @appzuka !
Just FYI, I've created a proposal on the TypeScript repo to add custom file extensions support as a TypeScript plugin: https://github.com/microsoft/TypeScript/issues/38736