Vue.js Vite build error <video><source> tag

Question

I'm developing a Vue 3 app and trying to replace a static image with a video but it throws

[vite] Build errored out.
Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript) at error (/myapp/node_modules/rollup/dist/shared/rollup.js:5275:30)
...

This build (not the image you are using, just for display):

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_image.png">
</video>

This won’t:

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_movie.mov">
</video>

I'm new to Vite and I'd like to understand why it seems to want to import videos from HTML tags.

Answer 1

As @adain pointed out, the .mov file is not the default list of resource types to be excluded from the transformation pipeline used in the build.

The solution is to configure assetsInclude to add the .mov file to this list:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  assetsInclude: ['**/*.mov'],
  ⋮
})

Another solution is tobinda literal string: (not required for the above assetsIninclude configuration)