Typescript: Cannot find module (TS2307)

[webcoderkz]

Created nuxt project using npx

Contents of tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@types/node", "@nuxt/types"]
  },
  "exclude": ["node_modules"]
}

Index.vue (where i face import issue):

<script lang="ts">
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

Component successfully imports, but TS server reports an error Error:(28, 18) TS2307: Cannot find module '~/components/Logo.vue'.

[webcoderkz]

It was because of missing Vue module declaration, i've created ts-shim.d.ts file in the root directory:

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

Please, update your documentation, so other won't struggle with this: https://typescript.nuxtjs.org/guide/setup.html

[kevinmarrec]

Sure @webcoderkz , it should have been there since months 🤦‍♂️, you can also create a documentation PR to contribute :smiley:

[steklopod]

Looks ugly:

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

:-( Why it could not just work out of the box?

[webcoderkz]

Because they've added TS support in nuxt recently. There's many flaws yet.

[kevinmarrec]

This is not ugly, it's intended to be done like this. And it can't be ouf of the box cause people may declare aside types of each component ans not a global one.

Because they've added TS support in nuxt recently. There's many flaws yet.

I wouldn't say recently as it's nearly about one year. For sure there have been lot of changes but current support works pretty well. Only issue is runtime for production which is something not only related to TypeScript support itself.

[kevinmarrec]

https://stackoverflow.com/questions/54622621/what-does-the-shims-tsx-d-ts-file-do-in-a-vue-typescript-project

The first file helps your IDE to understand what a file ending in .vue is

[boredland]

Is this still state of the art? I think it should be noted in the docs, that your imports have to be suffixed ".vue" for this to work.