Laravel 8 jetstream hot reload and browser sync do not work

I have a big problem with a system I just created.

I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...

However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...

My files are standard with laravel 8 and I haven't made any changes to the code yet.

Informations:

• Laravel: v8.41.0
• PHP: PHP v8.0.5
• Jetstream: v2.3.5
• npm: v7.7.6
• NodeJS: v15.14.0

my webpack.mix.js looks like this:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

my webpack.config.js looks like this:

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?

via Chebli Mohamed