baseUrlで設定したディレクトリにconstants.tsという名前のファイルを置くのは避けるべき

Posted at 2022-12-21

はじめに

Advent Calenderの準備をするべく、Reactアプリケーションの開発を行なっていた時の話です。
baseUrlに指定したsrc直下にconstants.tsを作成し、
定数を定義してimportすると下記のようなエラーが起きました。

モジュール '"constants"' にエクスポートされたメンバー 'BASE_URL' がありません。

そう思いtsconfig.jsonやconstants.tsを何度も確認しましたが、
間違っている様子はありません。
不審に思って調べていると、どうやらconstantsという名前が悪さをしていたことがわかりました。

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src"
  },
  ...
}

src/constants.tsに定数を定義します。
例えば、API_BASE_URLを定義するとしましょう。
envファイルなどを追加すると余計な要素が増えるので、今回はベタ書きします。

src/constants.ts

const API_BASE_URL = "http://localhost:3000"

export {
  API_BASE_URL
}

定義した、API_BASE_URLを別のページでimportしてみます。

src/pages/sample.tsx

import { API_BASE_URL } from "constants"

export const Sameple = () => {
  ...
}

すると、API_BASE_URLに対して前述したようなエラーが出ます。

モジュール '"constants"' にエクスポートされたメンバー 'API_BASE_URL' がありません。

原因は@types/nodeに"constants"という名前のmoduleが存在するためでした。

つまり、この"constants"モジュールのAPI_BASE_URLをimportしようとしていたけれど、
そんな定数は存在しないため、importに失敗してしまったというわけです。

解決策の一つは相対パスで指定することです。

src/pages/sample/index.tsx

// import { API_BASE_URL } from "constants"
import { API_BASE_URL } from "../../constants"

ただ、深い階層になると、"../"が増えて見通しが悪くなるので、あまりお勧めできません。

constants.tsという名前であるせいで、"constants"モジュールとコンフリクトするので、
const.tsなどとすれば、importできるようになります。

import { API_BASE_URL } from "const"

べースディレクトリより下の階層にconstants.tsを置くという解決策です。
ページ固有の定数なら、src/pages/sample/constants.tsとしたり、
各ページやコンポーネントで共通のものなら、src/common/constants.tsとしたりすれば

import { API_BASE_URL } from "./constants"

や

import { API_BASE_URL } from "common/constants"

というふうにimportできるので、"constans"モジュールとコンフリクトすることはありません。

以上、ベースディレクトリにconstants.tsという名前の定数ファイルを置くのは避けた方が良い、という話でした。

そもそも、constants/api_config.tsなどのように、
定義した定数の意図がわかるようにファイルを作成すれば良いだけのことかもしれません。

ただ、意外と知らなかった現象なので記事にしてみました。
みなさんは自分のように無駄にtsconfig.jsonとconstants.tsを行ったり来たりする時間を送らないように気をつけてください。