エイリアスがパラメータ付きimportで機能しない問題を解決

[qrac]

import AppHeader from "~/components/app-header?ph"

✘ [ERROR] Could not resolve "/Users/user/github/demo/src/components/~/components/app-header"

    node_modules/.minista/partial-hydration/string-index.mjs:4:17:
      4 │ import PH_3 from "/Users/user/github/demo/src/components/~/components/app-header"
        ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

エイリアスと ?ph を組み合わせると機能しない。esbuildで ?ph されているモジュールを取得するときにエイリアスの処理が考慮されていないから。path.isAbsolute(args.path) する前になんとかしてエイリアスを適応させないといけない。

[qrac]

onResolveのいずれかが返れば、それ以上リゾルバが呼ばれることはないらしい。

• Possible problem when chaining plugins that are resolving the paths evanw/esbuild#2192

リゾルバが別途設定されているPartial HydrationおよびRaw Loader・CssModulePluginの処理が行われるファイルにエイリアスが適応されないことになる。（MDX内のimportがどうなっているかはわからない）

リゾルバのプラグインを1つにまとめるか、エイリアスの処理を各プラグインに埋め込まなくてはならない。

[qrac]

検証を進めたところ、本番ビルド（esbuild）へのエイリアスは jsconfig.json または tsconfig.json の paths が適応されていた。

• [Feature] alias option for path Resolve evanw/esbuild#38

そして逆に前回 (#47) の修正で入れたプラグインが動いていないことが分かった。そもそも上記 paths が適応された場合はfilterにヒットしなくなる。

ただ、jsconfig.json または tsconfig.json の paths はPartial Hydrationなどのパスにはなぜか適応されていない。別途処理が必要。

[qrac]

jsconfig.json・tsconfig.json の設定のみにした場合はViteの開発サーバーがコケるので、Vite側に resolve.alias を渡す必要はある。

[plugin:vite:import-analysis] Failed to resolve import "~/components/app-header" from "src/components/app-layout.tsx". Does the file exist?

[qrac]

エイリアスを置換した際に拡張子がないと読み込めない。以下のように .tsx がついていると読み込める。

"/Users/user/github/demo/src/components/app-header.tsx"

[qrac]

エイリアスのプラグインは動いたが、やはりリゾルバが1回返されていると他のプラグインが適応されない。なのでaliasプラグインは削除し、jsconfig.json・tsconfig.json の設定が必須。その上で他のプラグインのパス解決を挿入する。

[qrac]

v2.6.2にて修正。