【Next.js】VSCode でパスエイリアスの警告が表示される

Next.js の環境構築中に軽くハマったのでメモ。

前提

バージョン

パスエイリアスの設定

問題が起きた環境では、ルート配下の tsconfig.json で以下のようにパスエイリアスの設定を行っていた。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

何が起きたか

@/components/hogehoge の形式でモジュールをインポートしようとすると、VSCode 上で以下の警告が表示された。ちなみに、ビルドは問題なく通るので、VSCode 上のエラーになる。

モジュール '@/components/hogehoge' またはそれに対応する型宣言が見つかりません。ts(2307)

結論と解決策

結論としては、Storybook 導入時に自動生成された src/tsconfig.json が、ルート配下の tsconfig.json と競合していた。警告が表示されたファイルは src/app 配下に配置していたので、ルート配下の tsconfig.json で設定していたパスエイリアスを VSCode がうまく検知できなかったのだと思われる。なので、src/tsconfig.json を src/stories/tsconfig.json に再配置し、VSCode を再起動することでひとまずは解決。

根本的な解決になっているかといえば、正直微妙なところではあるが、Storybook 導入時に自動生成されたファイルなので、src/stories 配下のみに適用させる形とすることで、むしろ src 配下の他ファイルにも影響を及ぼさずに済むので問題ない。と勝手に思っている。（ちなみに、移動させずに src/tsconfig.json でパスエイリアスの設定を行ったが解決できず）

Storybook インストール時にどういった意図で自動生成されるかはわからないが、内容的に特殊な記述はないように見えたので、不要であればそのうち消してしまってもいいかな。

tsconfig.json の複数設置について

一応、tsconfig.json はサブディレクトリ配下等に複数設置が可能みたいで、その場合はファイルからみて一番近い設定ファイルが適用されるらしい。ただ、今回ビルドは問題なく通っていたのでその辺はなぜなんだろうなーと。自分は TypeScript 触りたてなので、今後キャッチアップしていく中で、また立ち返って原因を調査したいと思う。

余談

問題発生当初は、Storybook が自動生成した src/tsconfig.json に気づかずにひたすら検索して原因を調査していた。同様の事象が起きるケースは複数確認できたが、一般的には、tsconfig.json の paths や include の設定を見直したり、VSCode のプラグインを無効にすることで解決するケースが多いようだった。