Import without .vue extension in ts files

[l00k]

Version

4.2.3

Reproduction link

https://github.com/l00k/sample-vue-issue

Environment info

Environment Info:

  System:
    OS: Linux 5.3 Linux Mint 19 (Tara)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.12.0 - ~/.nvm/versions/node/v12.12.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v12.12.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.132
    Firefox: 73.0.1
  npmPackages:
    @fortawesome/vue-fontawesome: ^0.1.9 => 0.1.9 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.2.3 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.2.3 
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-router: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.3 
    @vue/cli-service: ~4.2.0 => 4.2.3 
    @vue/cli-shared-utils:  4.2.3 
    @vue/component-compiler-utils:  3.1.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    typescript: ~3.7.5 => 3.7.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.2 => 7.2.3 
    vue-cli-plugin-buefy: ~0.3.7 => 0.3.7 
    vue-cli-plugin-electron-builder: ~1.4.6 => 1.4.6 
    vue-cli-webpack:  1.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.1 
    vue-property-decorator: ^8.3.0 => 8.4.1 
    vue-router: ^3.1.5 => 3.1.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.2 => 3.1.3 
    vuex-class: ^0.3.2 => 0.3.2 
    vuex-module-decorators: ^0.16.1 => 0.16.1 
  npmGlobalPackages:
    @vue/cli: 4.2.3

Steps to reproduce

npm run serve

What is expected?

I should be possible to import without .vue extension in path

What is actually happening?

Errors in
src/tests/test-ts-import-noext.vue(3,20)
src/tests/test2-import-noext.ts(2,20)
while importing without vue extension

---

Note other tests (src/tests)

• it is possible to load dependency using require in all possible ways
• it is possible to use import without ext while we use JS:

Is is issue with ts-loader?

[haoqunjiang]

Yeah. I'm not sure how to support this use case with the current ts-loader functionalities.

It's a type-checking error than a real compilation error because the TypeScript compiler does not support custom file extensions.

We worked around this limitation by appending the .ts(x) extension to any .vue files passed to ts-loader, using the appendTsSuffixTo option. The .ts extension is only meant for the use of type checking, and the .vue file is used for actual compilation.

But if you don't specify a file extension, there would be much logic to calculate to decide whether a .ts extension should be added.
So I'm not sure how to fix it. It might be tricky.

[l00k]

I see.. sad.

here would be much logic to calculate to decide whether a .ts extension should be added.

@sodatea
Where could I start working on that? That would require webpack plugin / loader?

[haoqunjiang]

I'm not sure actually.

/cc @HerringtonDarkholme Do you have any idea on how to support this use case?

[yoyo930021]

Ref: vuejs/vetur#423 (comment)

[HerringtonDarkholme]

@sodatea @l00k You probably need to change ts-loader's source code to make ts-loader recognize vue file without extension.

My suggestion would be start by hacking ts-loader's resolveModule function https://github.com/TypeStrong/ts-loader/blob/ce39c25a00641cb708efcd2e31556cb3f7afa771/src/servicesHost.ts#L768-L776.

[haoqunjiang]

Thanks.
Considering that extension omission is not supported in Vetur, I think we won't add first-class support in Vue CLI either.
For anyone who still wants this feature, please raise an issue or submit a PR to ts-loader instead.

[DCzajkowski]

@sodatea shouldn't this solve the issue?

[ivanovvitaly]

You need to install awesome-typescript-loader package, then you can import without .vue extension