CODEWITHSUNDEEP
reactjslaravelwebpacklaravel-8laravel-mix
mohammad asghari
mohammad asghari

Reputation: 1894

How to fix Error "Module parse failed: Unexpected character" in laravel mix

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?

Upvotes: 1

Views: 2135

Answers (1)

mohammad asghari
mohammad asghari

Reputation: 1894

After one 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

Upvotes: 2

Related Questions