typescript building error when import .vue file with separate .ts file

[troy351]

Version

3.0.0-beta.6

Reproduction link

https://github.com/troy351/vue-cli-demo

Steps to reproduce

clone the repo, run

npm install
npm run serve

What is expected?

run success

What is actually happening?

error File '/src/components/HelloWorld.vue' is not a module.
in App.vue

---

use inline script (not put script into a separate file) works fine

[posva]

vuejs/vue#5298 (comment)

This is because you don't have declarations of .vue files, then the typescript compiler cannot load them. You need to declare general declaration of .vue file in your project or generating each .vue file declaration by using vuetype

[troy351]

@posva not exactly the same.

I do have file shims.d.ts which declare *.vue files

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

and it works like this

// a.vue
<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'a',
  })
</script>

// b.vue
<script lang="ts">
  import A from './a.vue'
</script>

but the code below throw an error

// a.vue
<script lang="ts" src="./a.ts">
</script>

// a.ts
 import Vue from 'vue'

  export default Vue.extend({
    name: 'a',
  })

// b.vue
<script lang="ts">
  import A from './a.vue'
</script>

[posva]

Maybe @ktsn knows how to make <script src="Component.ts"/> work

[ktsn]

This looks like fork-ts-checker-webpack-plugin issue.
I already opened an issue: TypeStrong/fork-ts-checker-webpack-plugin#111

[UnnoTed]

I had the same issue some time ago, but i got it to work by removing the .vue extension.

[shenron]

@UnnoTed
Are you sure about removing the .vue ?

[UnnoTed]

@shenron 100% sure https://www.youtube.com/watch?v=k7UkuPzh22o

[shenron]

Thank you for your answer, so I guess I have a bad config.

I've a fresh new project generated by vue-cli@3, I just split a module in three files (ts, html, vue). I still have a problem during the serve/build. I tried to remove .vue, same trouble.

So I don't know if it's link to a vue-cli config or not, I'm sorry if it's not the good place to ask help.

I've created a repo to reproduce:

https://github.com/shenron/vue-cli-ts-seed

DONE Compiled successfully in 4327ms 04:14:26
ERROR in /home/node/app/src/views/Home.vue
10:24 File '/home/node/app/src/components/HelloWorld/HelloWorld.vue' is not a module.

  import { Component, Vue } from 'vue-property-decorator';
  import HelloWorld from '@/components/HelloWorld/HelloWorld.vue'; // @ is an alias to /src

  @Component({
   components: {

ERROR in /home/node/app/tests/unit/HelloWorld.spec.ts
2:24 File '/home/node/app/src/components/HelloWorld/HelloWorld.vue' is not a module.

import HelloWorld from '@/components/HelloWorld/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {

Version: typescript 2.8.3
Time: 4092ms

[troy351]

@shenron add // @ts-ignore before each import '*.vue' could be a temporary solution.

// @ts-ignore
import HelloWorld from '@/components/HelloWorld/HelloWorld.vue'; 

[shenron]

@troy351

Yes ! it works thank you very much.