"[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

関連記事