Video/mp4 not loading using Webpack, Laravel Mix in Laravel 8 & reactjs - php

Question

I'm new to Laravel and I'm trying to compile and upload my resources of video using Laravel Mix.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css');
And this is the code frontend with the react
import React from 'react';
import Video from '../../videos/video.mp4';
import {HeroContainer, HeroBg, VideoBg} from './HeroElements';
const HeroSection = () => {
return (
<HeroContainer id="home">
<HeroBg>
<VideoBg autoPlay loop muted src={Video} type='video/mp4' />
</HeroBg>
</HeroContainer>
)
}
export default HeroSection;
And this is the result of the output and error
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Answer 1

If you are experiencing the error in the screenshot below, try the following:
Install the raw_loader module:
npm install raw-loader --save-dev
In the webpack.mix.js file use the raw_loader module in a rule that captures the files you want:
const mix = require('laravel-mix');
mix.webpackConfig({ module: { rules: [{ test: /\.mp4$/i, use: 'raw-loader' }] } })
.ts('resources/ts/app.ts', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
For the regular expression to capture more file you can use it as:
/\.(mp4|avi|pdf|mp3)$/i
The error that occurred before using the raw_loader module:
Success using raw_loader module:
Ps: Looks like you're using React. In my example I used Vue.Js 3... but the problem doesn't seem to relate to that.