VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations

Question

When I create a script as typescript (lang="ts") I get an error stating

"Cannot find module './components/Navigation' or its corresponding type declarations (Vetur 2307).".

I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application.

app.vue

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

Navigation.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

Boussadjra Brahim · Accepted Answer · 2021-01-09 18:51:54Z

45

In the src folder add the file shims-vue.d.ts with the following content :

Vue 2 :

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

Vue 3:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

and import the component with its extension .vue :

 import Navigation from './components/Navigation.vue';

instead of :

import Navigation from './components/Navigation';

edited Jan 9, 2021 at 18:51

answered Oct 5, 2020 at 17:48

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Guillermo Garcia Over a year ago

As per this github comment: "It is expected behavior... In the next major version, we'll stop supporting extension-less import of single file components at all (currently there's only the type checking error)."

evilscientress Over a year ago

Thanks, I just had the same error and was able to fix it with the shim file. I wish the official Vue 3 Typescript documentation and guide would tell you that you need this. sighs

twk Over a year ago

I was importing my component using .vue, however was still receiving the module import error as noted in this thread. I was able to create the shims-vue.d.ts file, along with updating my tsconfig.json in the root Vue app directory. Here's the thread on vue/vetur github that helped me. It seemed like I had to implement both fixes to resolve a whole slough of errors (that never prevented compile). I wish this was setup better out of the box as is a time sink just to get going. 🥲

Collectives™ on Stack Overflow

VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related