ViteでDynamicImportをする際の注意点

2022/03/20

vue3 + nuxt3の環境でDynamicImportしたかったけどなんかダメだったからメモ

import("@/assets/images/${imageName}.svg") 👈 こういうの

webpackの時はこれでも大丈夫だったんだけど、viteではこれでは怒られちゃう

調査

ここにimport文をどう書けばいいか書いてあった

prefixとかは使っちゃダメで、相対パスで記述しないといけなかった

import("../../../assets/images/${imageName}.svg")

こんな感じで今のコンポーネントのディレクトリから相対パスで記述してあげた

👉 だめ

なんで？？？？？？？

呼び出し元のコンポーネントで

こんな感じに記述してた。

今さっきのREADME読んでいると

'./locales/' + `${foo + bar}.js` -> './locales/*.js'

ランタイムコードに書かれる時、このワイルドカードを使ってswitch文が書かれてそこで引数を元にファイルを読み出すらしい

ん？？？？

images/${imageName}.svg

だと

images/*.svg

に変換されるから

images/arrow/right.svg

は読み込めない

コンパイラをforkして自分で書き換えることも考えたけど、nuxt3を使っているからSSRのコード生成されたものをviteのpluginで受け取る方法がわからなかった(割愛するけど、試した方法でpluginが受け取っていたのはコンパイル前の生のvueファイル)

だから今回は images/ に直でおくことで解決した。

もっといい方法はないかな...