Reactで絶対パス&エイリアスによるインポートをしたい

Reactで以下のように絶対パス&エイリアスによるインポートをする際、意外と手間がかかったため、参考にした記事をメモ。

import { Something } from "@/shared/components";

Create React Appで作成した場合

バージョン: create-react-app 5.0.1

https://chaika.hatenablog.com/entry/2021/07/22/083000

紹介されている内容のうち、以下を行うと読み込めるようになった。

1. tsconfig.jsonにbaseUrlとpathsを設定
2. webpackの設定の上書き

VSCodeについては、拡張機能を導入しなくても、以下の記事の設定をすることで、入力補完時も絶対パスインポートをしてくれるようになった。便利！

https://qiita.com/reriiasu/items/c53d11aac6c46b5e919d

Viteで作成した場合

バージョン: vite 3.2.2

以下の記事の設定 + 上記のVSCodeの設定で同じようにできた。

https://zenn.dev/k_u_0615/articles/34b7f7d4a79e52

Next.jsの場合

バージョン: next 13.0.1

公式ドキュメントの通り、tsconfig.jsonにbaseUrlとpathsを設定するだけでOK。

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/module-path-aliases

Next.jsに関しては、VSCodeの設定を追加しなくても、自動で絶対インポートをしてくれるようになった。