[vite]: Rollup failed to resolve import "image" from

Question

having an issue with my Vue 3 Vuetify SPA. I can run npm run dev just fine, and it loads assets, but when I run npm run build it fails to build with the error

✓ built in 3.25s
[vite]: Rollup failed to resolve import "image" from "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts".
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`
error during build:
Error: [vite]: Rollup failed to resolve import "image" from "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts".
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 viteWarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46546:23)
    at onRollupWarning (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46570:9)
    at onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46317:13)
    at Object.onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:25287:13)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23922:26)
    at file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23882:26

I have no idea what could cause this, the only "image" that I import on the gallery page is

const imagePaths = import.meta.glob("@/assets/gallery/*.*", {
  as: "imagePath",
});

also as a side-note if I import it using import.meta.glob("../../assets/gallery/*.* it does not load any images.

What could cause this / what steps can I take to fix it?

score 0 · Accepted Answer · answered May 06 '23 at 21:33

Turns out the problem was a really stupid issue

inside my component I was using v-img from Vuetify

<v-img
        v-for="(src, index) of images"
        :key="src"
        class="mx-auto pageGallery__img--img"
        :src="src"
        lazy-src="image"
        cover
        @click="changeShowImage(index)"
      >
        <template v-slot:placeholder>
          <div class="pageGallery__placeholder">
            <v-progress-circular color="accent" indeterminate size="64" />
          </div>
        </template>
      </v-img>

The lazy-src="image" line was causing the error.

[vite]: Rollup failed to resolve import "image" from

1 Answers1