Gatsbyの__PATH_PREFIX__変数がエディタ上で変数未定義エラーになってたので直す

はじめに

このブログは Gatsby で作っていて言語としては TypeScript を使っています。ソースコードを編集するといつも、__PATH_PREFIX__を呼び出している箇所でエラーが出ていました。そもそもこの変数は、Gatsby が自動で作成してくれる変数です。ビルドするとエラーは出ませんが、エディタ上では未定義の変数エラーとして扱われていました。

Cannot find name '__PATH_PREFIX__'.ts(2304)

無視してもいいのですが、あまりにも気になりすぎたのでエラーとして認識されないように修正しました。

やったこと

やったことは、型定義ファイルを作成し、グローバル変数として扱うようにしました。

具体的には、src/@types/global.d.tsファイルを作成し、以下のコードを追記しました。TypeScript では、@typesディレクトリは、型定義を扱うモジュールとする（ことが多い？）みたいでこのディレクトリを作成しました。もしかしたら、型定義を自作で行う場合typesだけの方がいいのかな？とも思います。が、動いているので一旦良しとします！

declare const __PATH_PREFIX__: string;

これを作成し、__PATH_PREFIX__を呼び出しているファイルでimportすると直りました。ただこれだと毎回importが面倒だし、そもそもグローバル変数だからいい感じに勝手に読み取ってほしいなと思い、さらに調べました。

すると、tsconfig.jsonなるものが TypeScript の世界にはあることを知りました。ここに今回自作した型定義ファイルを読み込むようにすることで毎回importをしなくてもエディタ上で__PATH_PREFIX__に対してエラーが表示しなくなりました。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "baseUrl": "./src/@types"
  }
}

baseUrlは、絶対パス参照でないモジュール名を解決するための基点となるディレクトリを設定できるオプションみたいです。本来は呼び出し元のコンポーネントよってimportする時のパスがずれて面倒になったりするときに解決するためののオプションなんですかね？今回は、自作した型定義ファイルのディレクトリを指定しました。

困ったこと

今は解決しているのですが、試行錯誤の時に困ったことも書いておきます。（そんな困ってもないけど）

global.d.tsを作成しグローバル変数を定義して、VSCode 上でこのファイルを開いたまま、__PATH_PREFIX__が書いてあるファイルを開くと、importやtsconfig.jsonに何も設定をせずともエラーが消えました。しかし、VSCode 上で、global.d.tsを閉じると__PATH_PREFIX__に対してエラーが出てきました。

LSP？が静的解析をする時に、いい感じに現在開いているファイルを考慮して気を利かせているんですかね？

最後に

TypeScript の設定は難しいですね。しかしフロントエンドをやるとなったら TypeScript は避けて通れない道だと思うので、向き合う必要があるなと思いました。

参考サイト

• Gatsby Typescript Plugin
• TSConfig リファレンス紹介
• 型定義ファイル (.d.ts)