Next.jsで、プロジェクトルートからの呼び出しに記述変更するとVSCodeでエラー。その修正方法。

こんにちは、Webサービス開発者のyuku_tasです。

簡単なプロフィール: MoldSpoon Inc.代表。開業から15年、業界に携わって20年。Webサイト/iOS/Androidアプリ開発から、
データ分析業務・コンサル業務、ベンチャーから保険会社まで様々な案件を個人会社の形で請け負ってまいりました。
詳しくはこちら

本記事のゴール

VSCodeで、

相対パス（ファイルの位置から）呼び出し

を

相対パス（プロジェクトルートから）呼び出し

に変更するとエラーが出るので、それを治したい。

作業

自分が解決したケース

前もプロジェクトをスクラッチで立ち上げる時に、同様の事例が発生して治したのですが、すぐ忘れるので備忘録も兼ねて書きます。

ts.config.json

の

basePathに記述を追加すれば一発です

{
  "basePath": "./"
  // 攻略
}

別のケース

で解決したというケースもあるようです。このパターンは、同じところで警告が出るとはいえ、別の内容かもしれませんね。

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
  ]
}

自分のプロジェクトの場合は、.ts / .tsx ファイルが少ないのでいいですが、大量に傘下にある場合は ビルド時のパフォーマンスに影響出るようです。（もしかするとVSCodeの挙動にも問題出るかも）

なので、下記のように構成に応じて、指定するパスを明示してあげたほうがいいのかもしれません。

{
  // src,lib以下の全てのts/tsxファイルを読み込み対象とする　（指定するパスはこの限りではない）
  "include": [
    "src/**/*.ts",
    "lib/**/*.ts",
    "src/**/*.tsx",
    "lib/**/*.tsx",
  ]
}

まとめ

こういうのってその言語・フレームワークばっかり使ってると手癖で覚えていくもんだよなーと思います。そうじゃないと、いちいちググんないとダメですね...

この記事が何かのお役に立てれば幸いです。最後までお読みいただきありがとうございました！