VSCode」タグアーカイブ

Cannot find module ‘#app’ or its corresponding type declarations. と言われたら

エラー内容

Cannot find module '#app' or its corresponding type declarations.

というエラーが、Nuxt Bridge(TypeScript)の開発時に、VS Codeで発生。

例えば、このようなコードでエラーが発生する

import { readonly, useState, Ref } from '#app'

動作環境

Nuxt Bridgeの導入環境

  • node 16.13.1
  • npm 8.1.2
  • nuxt-edge 2.16.0
  • @nuxt/bridge 3.0.0
  • Type Script 4.6.2
  • Visual Studio Code 1.65.2
  • Volar 0.33.2

解決策

tsconfig.jspathsを以下の様に修正

"paths": {
  "~/*": ["./*"],
  "@/*": ["./*"],
  "#app": ["./node_modules/@nuxt/bridge/dist/runtime/index.d.mts"]
},

原因

nuxiが生成する.nuxt/tsconfig.jsonで設定される#appのパスが、TypeScript用のファイルに通っていないのが原因の模様。

"#app": [
  "node_modules/@nuxt/bridge/dist/runtime/index"
],

VS Codeのタイトルバーをカッコよくする

VS(Visual Studio) Codeの1.25からタイトルバーの表示内容とスタイルを変更できるようになった。

設定ファイルに、

"window.titleBarStyle": "custom"

と記述すると、タイトルバーがこんな感じになる。

ちょっとだけ、シュッとなる。

なお、このオプションは、Windows/Linuxだけ有効。もとから、Macはシュッとなっていた。