Laravel-mix: npm run hot **Uncaught TypeError: Cannot read property 'call' of undefined but "only" when run with mix.sass()

[sINusBob]

• Laravel Mix Version: 4.1.4
• Node Version: v12.16.1
• NPM Version: 6.14.0
• OS: Windows 10.0.16299.726

Description:

When executing the npm run hot in a "clean install" of Laravel v5.7, and following the instructions in the documentation of the Laravel Mix -- https://laravel.com/docs/5.7/mix -- everything looks fine, however, error is displayed in the browser console, but if I run npm run dev, no error is displayed.

Apparently it is functional, but I'm not sure if this is expected behavior or if in fact it is an error and that needs some adjustment or parameterization.

app.js:726 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:726) at fn (app.js:101) at Object../node_modules/extract-text-webpack-plugin/dist/loader.js?!./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./resources/sass/app.scss (app.js:7633) at __webpack_require__ (app.js:726) at fn (app.js:101) at Object../resources/sass/app.scss (app.js:60891) at __webpack_require__ (app.js:726) at fn (app.js:101) at Object.0 (app.js:60948) at __webpack_require__ (app.js:726)

But the interesting thing is that if I run without mix.sass('resources/sass/app.scss', 'public/css'), no error is displayed.

It also happens in CENTOS 7 and also with Laravel v5.8

Steps To Reproduce:

1. composer create-project --prefer-dist laravel/laravel="5.7.*" .
2. npm install
3. npm install vue
4. npm install vuetify
5. npm install vue-router
6. npm run dev
7. npm run hot

package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"vue-router": "^3.1.6",
"vuetify": "^2.2.15"
}
}

package.json
const mix = require('laravel-mix');

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

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

[reed-jones]

Not a fix, but when this happens to me, the error goes away after I save my first scss file (causing it to recompile)

[sINusBob]

I appreciate the information, I was really unclear about this message, mainly because he is starting to study vuejs with laravel, but it really caught my attention, since I did a lot of research and I not found something that mentioned about this message that is generated for the first time.

[kovinet]

I have this error every time I first run npm run hot and then I have to change something in app.scss file so it gets recompiled and error goes away as mentioned by @reed-jones - but what is the reason for this and is there any fix available?