vue-cli: typescript building error when import .vue file with separate .ts file

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 10
  • Comments: 28 (16 by maintainers)

Most upvoted comments

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

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

@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>

@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:

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

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

@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

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?

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