TypeScriptでのimportのパス解決が全然わかりません

Question

概要

webpack(webpacker)とtypescriptを使ったアプリケーションを書いています。

自分で作成したリポジトリ内のtsファイルをimportで読み込むときに、絶対パスで読み込みたくて、tsconfig.json に"baseUrl" を設定しましたが、絶対パス指定で読み込めるファイルとそうではないファイルがあります。よく分かりません。

また、typescript 絶対パス で検索すると 「compilerOptions.paths に足して解決したり」や 「webpackの resolve.alias を足したり」する記事がいくつか出ます。全然できる気がしません。

質問

（絶対パスでimportがしたいだけなのにできる気がしません。）

(1) パスが解決できない時のエラーメッセージが2種類あるのですが、それぞれどういう違いがあるのでしょうか？
これらのエラーメッセージ違いから、原因の推測が可能ですか？

ERROR in ./app/javascript/packs/setting_editor.tsx
Module not found: Error: Can't resolve 'hooks/use_modal' in '/Users/takeshi/src/cloud/app/javascript/packs'
resolve 'hooks/use_modal' in '/Users/takeshi/src/cloud/app/javascript/packs'

ERROR in app/javascript/packs/setting_editor.tsx:10:26
TS2307: Cannot find module './hooks/use_modal' or its corresponding type declarations.
     8 | import { Button, buttons } from "types/button";
  > 10 | import { useModal } from "./hooks/use_modal";
       |                          ^^^^^^^^^^^^^^^^^^^

(2) webpackやtypescriptが実行されるまで、どう処理されて、どうやって解釈されるかを、理解するための資料はありますか？

Comments

[hoshi-takanori]

create-react-app をお使いなら tsconfig.json に baseUrl を追加するだけですが、そうでない、かつ webpack をお使いなら、webpack.config(.js) の resolve に modules: ['node_modules', 'src'] とか追加すれば良いかも。

[ukyoda]

ディレクトリ構成や、tsconfig.json、webpack.config.json、package.jsonの内容を掲載してもらった方が回答がしやすい気がします。