I'm using laravel-mix in Laravel8 to write react code and compile then.
In normal use everything is right. but when I want to load an mp4 file into react using line below:
require(`./files/${mp4file}`)
I receive this error for loading mp4
file during compile with laravel-mix by npm run dev
:
ERROR in ./resources/files/5.mp4 1:0
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)
webpack compiled with 1 error
NOTE: I have this program in create-react-app
and it works very well without no problem during build
and run
.
How can I fix this error?
CodePudding user response:
After a day I found the solution,
You need to build your custom loader. For doing that I added this line to webpack.mix.js
:
mix.extend("addWebpackLoaders", (webpackConfig, loaderRules) => {
loaderRules.forEach((loaderRule) => {
webpackConfig.module.rules.push(loaderRule);
});
});
mix.addWebpackLoaders([
{
test: /\.(mp4|svg|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
}
]
}
]);
By this way you've added file-loader
for such files like mp4
,svg
,gif
. After that you can run npm run dev
.
This link helped me: https://github.com/laravel-mix/laravel-mix/issues/145