Zenn
🐷

【Vite * React】エイリアスで登録しようとしてもエラーとなる

2024/10/30に公開
React
Vite
tech

こんにちは投資ロウトです。

背景

Vite * Reactでシステムを構築する必要があるのですが、@のエイリアスを使ってインポートしようとしてもエラーとなってしまう事象が起きています。

Error the following dependencies are imported but could not be resolved.

解決策

自分は以下の記事を試すとうまくいきました。

https://devlabo-hk.com/article/article-2

# 具体的な部分(vite.config.ts)
resolve: {
    alias: [{ find: "@", replacement: "/src" }],
  },

tsconfigは以下です。

"compilerOptions": {
   "baseUrl": ".",
   "paths": {
     "@/*": ["./src/*"],
   },

試したこと(失敗)

①以下の「vite-tsconfig-pathsとtsconfig.json設定の組み合わせ」を試してもなぜか上手くいきませんでした。

https://zenn.dev/fugithora812/articles/825a3374c10e61

https://zenn.dev/januswel/articles/8ffc9640af074e

②こちらもうまくいきませんでした。

https://minerva.mamansoft.net/Notes/📝Viteでtsconfig.pathsの設定が有効にならない

③こちらも自分はうまくいきませんでした。

https://github.com/vitejs/vite/issues/17501

Discussion