Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。
import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。
next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。
Typescript
Typescript を使用する場合は import の名前解決のための変更をします。
tsconfig.json に baseUrl と paths を追記。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { ... "baseUrl": ".", "paths": { "$components*": ["./src/components*"], "$contexts*": ["./src/contexts*"], "gl-react": ["./types/gl-react"] } } } |
ここでは alias の他に type のオーバーロードしたりします。
VSCode の場合、設定反映のために再起動が必要な場合があります。
ビルド設定
トランスコンパイラの名前解決のために babel の設定をします。
まずはプラグインの追加。
|
1 |
yarn add -D babel-plugin-module-resolver |
次に babel.config.js の presets の下に plugins を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
return { presets: ["babel-preset-expo"], plugins: [ [ "module-resolver", { alias: { $components: "./src/components", $contexts: "./src/contexts", }, }, ], ], }; |
設定を読み込むため expo start している場合は再起動します。
エラー
最初 @xxx をエイリアスに設定していた時にビルドが失敗した。
Failed building JavaScript bundle.
Unable to resolve "@contexts/glsl" from "src\pages\main.tsx"
設定ミスか React Native では特殊な設定がいるのかと思って色々試したがエイリアスを @xxx 以外（今回は $xxx）にすると問題なく通った。
next.js では問題なかったので expo 固有の問題なんだと思いますが、思いもしなかったので大分ハマりました。