Laravel-mix: HMR not working with fresh Laraval installation/vuejs-boilerplate

[StefanNeuser]

• Laravel Mix Version: 4.1
• Node Version 12.10:
• NPM Version 6.11:
• OS: osx

Description:

On fresh laravel installation with laravel valet HMR is not working. I tried it with

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",

With and without HTTPS. In Chrome with trusted localhost... everythink.

app.js:727 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:727)
    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:4962)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object../resources/sass/app.scss (app.js:28580)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object.0 (app.js:28637)
    at __webpack_require__ (app.js:727)

Steps To Reproduce:

• new laravel
• npm install
• add <script src="{{ mix('js/app.js') }}"></script> to welcome.blade.php
• npm run hot

[AleeeKoi]

Hello, same problem here.
Every time I run default npm run hot command I need to comment content of my app.scss file, waiting for compilation, uncomment app.scss content and waiting compilation again.
I got this problem on three different project based on Laravel at now (two of them are v5.8 and one v6).
Follow my log:

app.js:770 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    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/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./resources/sass/app.scss (app.js:103854)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at Object../resources/sass/app.scss (app.js:148834)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at Object.0 (app.js:148891)
    at __webpack_require__ (app.js:770)

[meyerluk]

hey, i'm getting the same error

Laravel Mix Version: 4.1 and 5
Node Version 12.10.0:
NPM Version 6.11.3:
OS: osx

edit: not using valet, just "php artisan serve"

[asterism612]

I have same error
Laravel Mix Version: 4.0.7
Laravel: 6.0.4
NPM Version: 6.11.2
OS: osx

npm run hot!

[AleeeKoi]

I just realize that app.scss is compiled by default by webpack and it is linked as a resource in mix.config.js.
So, if you remove app.scss compilation from your mix.config.js and import it to your main .vue file (default is App.vue) hmr will works great again (and I think a little bit faster).
In your main vue file add tag style like this:

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

[StefanNeuser]

@AleeeKoi that's it! really good and working idea! I was just wondering why in vue-cli version 3 hmr is working with scss compilation and i saw they do it exactly the same way!

[StefanNeuser]

@AleeeKoi do you have any idea how to use this with laravel mix and tailwindcss?

[AleeeKoi]

@StefanNeuser I think that you can configure manually webpack in your mix file to work with tailwindcss. All scss you put in a vue file can be managed with webpack.
The following guide seems to work, but some adaptation is needed:
https://medium.com/backticks-tildes/how-to-configure-your-vue-js-app-to-use-tailwind-css-a6f95d06e1c7

[StefanNeuser]

if its okay if you dont need to compile you scss/css when you are working on js-only (in this case vuejs) than the second example is properly a solution too: https://github.com/JeffreyWay/laravel-mix/issues/2074#issuecomment-538929366