4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

nuxt.js+typescript環境で Property '$bvModal' does not exist on type~ とエラーが出てビルドできない問題をごり押しで解決

Last updated at Posted at 2020-04-15

問題

nuxt.js+typescriptでbootstrapVueを使っていた時の事、ビルドしようとしたら以下のようなエラーが表示されてビルドできない。

Property '$bvModal' does not exist on type 'CombinedVueInstance<Vue, unknown, { formatDateTime(date: Date): string; formatName(uid: string): string; deleteTopic(id: string, name: string): Promise<void>; }, { idNum: string; deletePermission: boolean; "name/names": any; }, Readonly<...>>'.

モーダルの制御に使う$bvModalがvueインスタンスに存在しない型だとかなんとか。

対処法

##多分正しいやり方
ちゃんと型を定義する。
###4/21追記
コメントをヒントに型定義を追加。tsconfig.jsonのtypesに"bootstrap-vue/esm"を追加する。

tsconfig.json
    "types": [
      "@types/node",
      "@nuxt/types",
      "bootstrap-vue/esm"
    ]

コメントをくださった@jay-esさんに感謝

##今回のやり方
Vueインスタンス側(this)をany型にダウンキャストして型の定義を不要にする。
Typescriptの利点をすべて捨てるような方法だけどこれでビルドできる。

hoge.ts
(this as any).$bvModal.hide(ebi)

誰か正しい解決策を教えてほしい。

#参考資料
Property 'xxx' does not exist on type CombinedVueInstance ? #8721

4
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?