React Native, Expoでのパスエイリアス設定


Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。

import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。

next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。

Typescript

Typescript を使用する場合は import の名前解決のための変更をします。

tsconfig.jsonbaseUrlpaths を追記。

ここでは alias の他に type のオーバーロードしたりします。

VSCode の場合、設定反映のために再起動が必要な場合があります。

ビルド設定

トランスコンパイラの名前解決のために babel の設定をします。

まずはプラグインの追加。

 

次に babel.config.jspresets の下に plugins を追記します。

設定を読み込むため expo start している場合は再起動します。

エラー

最初 @xxx をエイリアスに設定していた時にビルドが失敗した。

Failed building JavaScript bundle.

Unable to resolve "@contexts/glsl" from "src\pages\main.tsx"

設定ミスか React Native では特殊な設定がいるのかと思って色々試したがエイリアスを @xxx 以外(今回は $xxx)にすると問題なく通った。

next.js では問題なかったので expo 固有の問題なんだと思いますが、思いもしなかったので大分ハマりました。


コメントを残す

メールアドレスが公開されることはありません。