MohamedTammam's avatar

Laravel-mix watch doesn't work when using sail.

If I'm running npm run watch it watches the changes, but when I try to run it on the container using sail npm run watch it doesn't work. It only compilers the files one time when it starts.

webpack.mix.js

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

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': __dirname + '/resources/js',
            '~': __dirname + '/resources'
        },
    },
})

mix.js('resources/js/app.js', 'public/js').vue()
mix.sass('resources/scss/app.scss', 'public/css')
    .options({
        postCss: [
            require("tailwindcss"),
        ],
    });

app.js

window.Vue = require('vue').default;

import App from './App.vue';

Vue.component('app', App);

const app = new Vue({
    el: "#app"
});
0 likes
7 replies
Rollins585's avatar

You need to make cross-env working globally instead of having it in the project.

run

$ sudo npm install --global cross-env

--- update ---

But, my advice is to avoid executing npm run ... on the guest homestead, because it is very slow and because there is no benefit in it.

No matter where you build the assets they are going to be executed in the browser. So you better install npm on your host computer and build the assets there.

https://www.myloweslife.ltd/

Sinnbeck's avatar

How doesnt it work?

Does it quit the process after it has compiled? Or does it not pick up changes? Remember that you still need to manually reload the page after each change.

MohamedTammam's avatar

@Sinnbeck It compile once it starts. Then waits for changes but when I change something it doesn't re-compile. I know I have to reload the page. The problem is the files aren't re-compiled automatically when I change something and save.

MohamedTammam's avatar
MohamedTammam
OP
Best Answer
Level 51

The solution was to run sail npm run watch-poll instead of npm run watch

Please or to participate in this conversation.