Typescript: Error when importing components without .vue extension in TypeScript

[cretueusebiu]

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";

_{This bug report is available on Nuxt community (#c8696)}

[kevinmarrec]

@cretueusebiu I'm not able to reproduce it, your CSB doesn't seem to throw errors 🤔

[cretueusebiu]

@kevinmarrec It will still compile and work in the browser, but in the terminal it will throw an error.

If you open the CSB terminal and don't see the error, make a change in the code just to trigger nuxt to recompile it.

[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.

[cretueusebiu]

What's strange is that everything sill compiles and works fine, it just throws that error in the terminal.

[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.

[rafasegat]

How do I fix it?

[rafasegat]

It says:
26:31 error Missing file extension for "~/components/employee/layout/Sidebar" import/extensions 26:31 error Unable to resolve path to module '~/components/employee/layout/Sidebar' import/no-unresolved 27:30 error Missing file extension for "~/components/employee/layout/Header" import/extensions 27:30 error Unable to resolve path to module '~/components/employee/layout/Header' import/no-unresolved 28:30 error Missing file extension for "~/components/employee/layout/Footer" import/extensions 28:30 error Unable to resolve path to module '~/components/employee/layout/Footer' import/no-unresolved
and when include .vue, it stills display this error:
26:31 error Unexpected use of file extension "vue" for "~/components/employee/layout/Sidebar.vue" import/extensions 26:31 error Unable to resolve path to module '~/components/employee/layout/Sidebar.vue' import/no-unresolved 27:30 error Unexpected use of file extension "vue" for "~/components/employee/layout/Header.vue" import/extensions 27:30 error Unable to resolve path to module '~/components/employee/layout/Header.vue' import/no-unresolved 28:30 error Unexpected use of file extension "vue" for "~/components/employee/layout/Footer.vue" import/extensions 28:30 error Unable to resolve path to module '~/components/employee/layout/Footer.vue' import/no-unresolved

[rafasegat]

Here is the solution: https://github.com/nuxt/nuxt.js/issues/200