Laravel mix npm run hot 错误 - Uncaught TypeError: Cannot read property 'call' of undefined答案

【问题标题】：Laravel mix npm run hot error - Uncaught TypeError: Cannot read property 'call' of undefinedLaravel mix npm run hot 错误 - Uncaught TypeError: Cannot read property 'call' of undefined
【发布时间】：2022-01-19 15:22:23
【问题描述】：

我开始学习 VUEJS 和 Hot Module Replacement (or HMR)，我完成了 Laravel v5.8 的全新安装，并按照 Laravel Mix 文档中的说明 -- https://laravel.com/docs/5.8/mix -- 一切看起来都非常很简单，不过在运行npm run hot时，浏览器控制台会显示错误。

显然它是功能性的，但我不确定这是否是预期的行为，或者实际上它是否是一个错误并且需要一些调整或参数化。

但有趣的是，如果我运行npm run dev，则不会显示错误。

版本

# php artisan --version
Laravel Framework 5.8.37

# npm -v
6.13.4

# node -v
v12.16.1

# yarn -v
1.21.1

webpack.mix.js

const mix = require('laravel-mix');

mix.options({
    hmrOptions: {
        host: 'vueapp.lab',
        port: '8080'
    }
 });

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

【问题讨论】：

您能否在第 726 行包含您的 app.js 代码
感谢您的建议，我会测试。
我在全新安装 Laravel 7.3 时也遇到了这个问题。这与 laravel-mix 有关，afaik 它与 extract-text-webpack-plugin 有关。此 atm 没有解决方法。
我也遇到了同样的问题，请问大家有没有解决这个问题的。请告诉我？

标签： laravel npm laravel-mix

【解决方案1】：

原因是 webpack 默认编译 app.scss，并在 mix.config.js 中作为资源链接。

所以从你的 mix.config.js 中删除 app.scss 编译并将其导入你的主 .vue 文件（默认是 App.vue）hmr 就可以了。

在你的主 vue 文件中添加如下标签样式：

 <style lang="scss">
    @import 'path/to/app.scss';
 </style>

【讨论】：