Vue-cli: 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]

https://github.com/vuejs/vue/issues/5298#issuecomment-289641843

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: https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/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

[bc3]

indeed had a sort-a-like issue, now it works :-D thanks

[LinusBorg]

A Workaround is described here:

https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111#issuecomment-401519194

@ktsn since your issue has been open for more than 2 months now and a solution doesn't seem in sight - should we consider removing this plugin from vue-cli until the issue has been fixed? What's the advantage of using fork-ts-checker? It's more performant to run the typechecks in a separate process, is that all to it?

[codetalks-new]

@LinusBorg I'd agree with your idea, vue-cli should disable the plugin currently.
I've waste some time in my new project to handle this error. actually, I had waste some time in another project some days ago. well, I just forgot I had to config it with vue.config.js because A strong idea is always in my mind.I dont' need to configure it too much with vue cli 3.0. now,I think I'm wrong.

[ktsn]

@LinusBorg Yes, the advantage is only for performance. I agree with disabling fork-ts-checker-webpack-plugin until the issue is fixed.

The PR is already made in vue-parser which fork-ts-checker-webpack-plugin depends but I think we can replace it if there are no response from the lib author.

https://github.com/prograhammer/vue-parser/pull/5

[troy351]

seems that hot module replacement becomes abnormal after using the workaround provided by @LinusBorg

[LinusBorg]

What does "abnormal" mean, exactly?

Can you provide a repository with a minimum reproduction?

[troy351]

I mean component will lose its state after patch
demo here

Click button will increase count, but if adding some static text then count will be reset to 0 and this should not happen.

[LinusBorg]

Thanks, we will have a look.

@ktsn we should check this bout before we decide to deactivate the ts-checker plugin

[ktsn]

I ended up to make a PR to fork-ts-checker-webpack-plugin https://github.com/Realytics/fork-ts-checker-webpack-plugin/pull/130

[yyx990803]

@ktsn's PR has been merged, pending release in https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/132

[johnnyreilly]

We're currently waiting on @piotr-oles to generate a new token so we can release. (A result of the eslint token problem the other week.)

In the meantime I could publish this to our unofficial fork-ts-checker-webpack-plugin@next channel:

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

Let me know if that would help and I'll make it happen.

[beetaa]

@yyx990803 @troy351 In my case , when I try to import some vue files into the jest files written in ts format, vs code hint that I got an error in forms [ts] cannot find module... 2307. I think that it must be a problem for vs code to resolve the module path, so I include all the paths that typescript should treat that files, in tsconfig.json, just like this:

{
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "test/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "ts-custom.d.ts"
  ],
  "types": [
    "jest"
  ],
  "compilerOptions": {
    "outDir": "./dist/",
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "noImplicitReturns": true,
    "allowJs": false,
    "sourceMap": true,
    "pretty": true,
    "removeComments": true
  }
}

and finally, vs code feel so happy. :laugh:

[FlamesoFF]

@troy351

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

It's not working.

[troy351]

This should not happened since the bug was already fixed in the latest version.

------------------ Original ------------------
From: Artem [e-mail]
Date: Fri,May 3,2019 8:20 PM
To: vuejs/vue-cli [e-mail]
Cc: troy351 [e-mail], Mention [e-mail]
Subject: Re: [vuejs/vue-cli] typescript building error when import .vue file with separate .ts file (#1104)

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

It's not working.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[FlamesoFF]

@troy351 Um... all versions are latest.

[troy351]

@FlamesoFF Could you create a new empty project with the lateset vue-cli and check if that works?

[FlamesoFF]

@troy351 I don't use vue-cli, because I want to have full control over my project (webpack configurations and other stuff).

[troy351]

That makes things complicated. I suggest you to use vue-cli to create an empty project with all you needed plugins then use vue inspect to output its webpack config and compare to yours.

More about the command https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

FYI. vue-cli also allows you to full control the project while taking care of basic stuffs