run watch updates app.js twice, then compiles successfully without changing app.js when files change

• Laravel Mix Version: 6.0.10
• Node Version (node -v): 15.5.1
• NPM Version (npm -v): 7.3.0
• OS: MacOS 11.2.3

Description: I’m using Mix, Docker, Sail, all right out of the box. Everything was working great, using npm run watch. Suddenly (as far as I know, I didn’t change anything relevant) it stopped working. Each time I run npm run watch it compiles successfully and updates app.js twice. The third time my files change, it says it compiled successfully, but app.js has not been modified. (I didn’t start counting how many times it updated successfully at first, so I’m not totally certain it’s always 2 times, not 3, but since I’ve been counting it’s always 2.) I tried restarting my computer without effect. npm run watch-poll seems to have the same problem.

Steps To Reproduce:

I haven’t tried creating a new project to see if it has the same problem.

[ghost]

I had the same problem and tried absolutely everything. Eventually I found that the issue was with how I imported the Vue routes.

{
    path: '/test',
    name: 'test',
    component: () => import("../views/pages/test.vue")
},

I forgot to use a capital letter…

component: () => import("../views/pages/test.vue")

Should be:

component: () => import("../views/pages/Test.vue")

Apparantly when I run ‘npm run watch’ laravel mix is fine with importing my Test.vue eventhough I wrote ‘test.vue’. Thats why I did see changes when I restarted the watch. However, after the initial start laravel mix uses dynamic loading and at that point it will ignore the changes if I do not use the capital letter.

Watch will also ignore changes in components, after first run, if you import it without the correct use of capital or lowercase letters.

import Button from '@/components/Button'

I thought I’d post my mistake. Maybe some of you have the same issue?

[trevormiles]

What fixed it for me was similar to what @ghost mentioned.

I had an Index.vue file inside of a folder called EnrollForm, which I was importing like so:

import EnrollForm from '../../EnrollForm'

When I started up npm run watch, my changes were correctly reflected in the browser only for two compiles, and then the compiler would say “Build successful” but my changes were not reflected in the browser.

Per @ghost’s comment, I tried changing the import statement to this:

import EnrollForm from '../../EnrollForm/Index.vue'

And then my changes began to be reflected in the browser every time the compiler ran 🤷‍♂️

Thanks @ghost!