I'm working on a Vue 3 app and am trying to swap out a static image for a video and it's throwing a
[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 builds (not that you'd use an image but just to show):
<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
<source src="/images/my_image.png">
</video>
This does not:
<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 am trying to understand why it seems to be wanting to import the video from the HTML tag.
Add poster="/images/my_image.png" to the video tag. Like this;
<video poster=“/images/my_image.png” …
Otherwise, you can’t put an image into the source tag.
Vite seem can not resolve .mov video files. Read the document, set assetsInclude , build successed.
export default defineConfig({
assetsInclude: ['**/*.mov'],
...
})
As pointed out by @adain, .mov files are not in the default list of asset types to exclude from the transform pipeline used in the build.
The solution is to configure assetsInclude to add .mov files to that list:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
assetsInclude: ['**/*.mov'],
⋮
})
An alternative workaround is to bind a literal string: (not necessary with the assetsInclude configuration above)
<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
<!-- BEFORE -->
<!--<source src="/images/my_movie.mov">-->
<source :src="`/images/my_movie.mov`">
</video>