Error when importing components without .vue extension in TypeScript

Version

v2.4.3

Reproduction link

https://codesandbox.io/s/zrl1qrlo3p

Steps to reproduce

Go to the CodeSandbox reproduction link and open the terminal window.

What is expected ?

Resolve .vue files without throwing errors in the terminal.

What is actually happening?

It resolves .vue files but still throws an error in the terminal.

ERROR  in ~/pages/index.vue 
Cannot find module '~/components/HelloWorld'.

import HelloWorld from "~/components/HelloWorld";

<div align="right">_{This bug report is available on Nuxt community (#c8696)}</div>

[kevinmarrec]

@cretueusebiu Alright, I indeed have been able to see the error by triggering a change.

Well you need to add .vue extension when importing Vue SFC’s.

import HelloWorld from "~/components/HelloWorld.vue";

Implicit module imports (not providing extension of the imported module) should (IMO) only be done for .js & .ts extensions.

HelloWorld.js => import HelloWorld from "~/components/HelloWorld"; HelloWorld.ts => import HelloWorld from "~/components/HelloWorld"; HelloWorld.vue => import HelloWorld from "~/components/HelloWorld.vue";

If the extension is implicit, I guess it can’t be handled properly by the ts-loader used to handle Vue SFC with TS. And there isn’t workaround (As far as I know) other than providing the .vue extension in the import statement.

[kevinmarrec]

@cretueusebiu It’s cause of the TypeChecker which run in seperate process. See https://github.com/Realytics/fork-ts-checker-webpack-plugin#vue

To activate TypeScript in your .vue files, you need to ensure your script tag’s language attribute is set to ts or tsx (also make sure you include the .vue extension in all your import statements as shown below):

I’m closing this issue as it’s documented in the TypeChecker documentation.