Vue.js + TypeScript でコンポーネントをインポートしようとしたら Cannot find module と言われてしまった

Vue.js + TypeScript でページを作っていたら以下のようなエラーに遭遇したので、そのときの対処メモ。
改めて見てみるとめっちゃ恥ずかしい凡ミスなのですが、またやりそうなのでここにメモっておくことにします。

なにがおこっていたのか？

Vue.js のプロジェクトであるコンポーネントを読み込んだところ以下のようなエラーになりました。

Cannot find module '@/components/Modules/SomeModule' or its corresponding type declarations.

機械翻訳してみると、コンポーネントが見つからないか、対応する型宣言が必要みたいなエラーのようです。

解決方法

で、この内容で検索するとよく出てくるのが、↓のような内容のshims-vue.d.ts を作れというもの。

shims-vue.d.ts

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

ところがすでにこれは作成済みだし、エラーになっているのもある程度出来上がってきたサイトの1ページ、1箇所のみ。
別のページでも読み込んでるはずなのにそちらではエラーになってないということから、タイポか何かか？とも思ったのですが、
パスの指定は IDE のパス補完機能をつかいつついれたのでその可能性も低そう。。

で、とりあえず正しく読み込めている方のファイルと並べて import 文や Components の中身などを見比べてみたところ、違いがあったのは１箇所。

こっちが正しい方で

import SomeModule from '@/components/Modules/SomeModule.vue'

こっちがだめだったほう

import SomeModule from '@/components/Modules/SomeModule'

どうやら、import する際に拡張子「.vue」まで含めないとエラーになってしまうようでした。

意外とIDEの自動補完とかに頼り切ってると逆に見落としがちかも。。