Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module resolution for .vue files is not working inside .vue file #1117

Closed
piotr-oles opened this issue May 22, 2020 · 5 comments
Closed

Module resolution for .vue files is not working inside .vue file #1117

piotr-oles opened this issue May 22, 2020 · 5 comments

Comments

@piotr-oles
Copy link
Contributor

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

@piotr-oles piotr-oles added the bug label May 22, 2020
@appzuka
Copy link
Member

appzuka commented May 22, 2020

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
Copy link
Contributor Author

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

@appzuka
Copy link
Member

appzuka commented May 22, 2020

The solution is at:

vuejs/vue-class-component#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
Copy link
Member

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants