"[vite]: Rollup failed to resolve import" の対応
Published: 2022/6/29
問題
Nuxt 3 で開発を行ってる最中に、開発用コマンドである npm run dev を実行している時には問題ないが、プロダクション用ビルドのために npm run build を実行した場合にのみ、ビルドが例外で落ちてしまうような事象に遭遇した。
ERROR [vite]: Rollup failed to resolve import "images/foo.svg" from "components/AppItem.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41489:19)
at onwarn (node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41305:13)
at Object.onwarn (node_modules/rollup/dist/shared/rollup.js:23402:13)
at ModuleLoader.handleResolveId (node_modules/rollup/dist/shared/rollup.js:22686:26)
at node_modules/rollup/dist/shared/rollup.js:22647:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)
原因と対処
https://www.reddit.com/r/vuejs/comments/ufa2mu/vite_rollup_failed_to_resolve_import_imagepng/
上記にある通り、 public ディレクトリに突っ込んだ画像を import するためには、パスはスラッシュ(/)から始まらなければならないらしい。
以下の通りに修正を行い、問題は解決した。
- <img src="images/foo.svg">
+ <img src="/images/foo.svg">
Tags: nuxtvitenuxt3
関連記事
Unified のツールを Nuxt 2 で利用する方法
2022/6/21
Mismatching childNodes vs. VNodes の原因と対処
2022/6/21
Nuxt(Vue)の非同期コンポーネントはどうあるべきかの考察
2022/5/22
