如何修复 laravel 混合中的错误 "Module parse failed: Unexpected character"

Question

我正在使用 laravel-mix in Laravel8 编写反应代码然后编译。

正常使用一切正常。但是当我想使用下面的行将 mp4 文件加载到 react 中时：

 require(`./files/${mp4file}`)

我在使用 laravel-mix 编译期间加载 mp4 文件时收到此错误 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

注意： 我在 create-react-app 中有这个程序，它在 build 和 run 期间运行良好，没有问题。

我该如何解决这个错误？

Answer 1

一天后我找到了解决方案，

您需要构建自定义加载器。为此，我将此行添加到 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',            
            }
          ]
    }
]);

通过这种方式，您已经为 mp4、svg、gif 等文件添加了 file-loader。之后你可以运行 npm run dev.

这个 link 帮助了我： https://github.com/laravel-mix/laravel-mix/issues/145

如何修复 laravel 混合中的错误 "Module parse failed: Unexpected character"

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

laravel

reactjs

webpack

laravel-mix

laravel-8