Laravel-mix: Hot Module Replacement Not Compiling

[nickfederighi]

• Laravel Mix Version: 4.0.13
• Node Version (node -v): 10.15.0
• NPM Version (npm -v): 6.4.1
• OS: Windows 10 (Version 10.0.17134 Build 17134), Laravel Homestead

All npm commands run from Windows, not within the Homestead box via ssh.
I am using the package.json scripts as standard with a current Laravel installation

Description:

After upgrading to Laravel Mix 4.0, I have been unable to get HMR to work as expected. HMR was previously working prior to upgrading. I have removed the /node_modules folder, removed the lock file, cleared the cache, and reinstalled via npm install numerous times with no success.

Running npm run hot says that all of the assets have compiled successfully, but I am seeing the following issues:

• The main JS file, public/js/main.js is not updated with any recent changes in .vue components
• If .vue components are modified and saved, the console will show that the files are being successfully recompiled, but there are no changes reflected in the browser

It's worth noting that npm run watch or npm run dev work as expected and the js assets compile correctly. Running npm run dev to compile the JS, making some changes, then running npm run hot will result in the site returning the copy of JS that was compiled with npm run dev, but doesn't include the recent changes. Webpack dev server does appear to be working because the site is pulling the file from http://localhost:8080/js/main.js, but it isn't current.

Has anybody seen anything like this?

[ikristher]

I also experience this issue. did you find the solution for this issue?

[nickfederighi]

Hi @ikristher, yes, I was able to find a workaround that was referenced in #1483. Just place the following in your webpack.mix.js file and it should fix the Windows leading slashes that cause the issue. There are a number of threads that referenced this issue when Mix 2.0 came out, and it looks like the fix still hasn't been implemented in the v4.0...

Mix.listen('configReady', webpackConfig => {
    if (Mix.isUsing('hmr')) {
        // Remove leading '/' from entry keys
        webpackConfig.entry = Object.keys(webpackConfig.entry).reduce((entries, entry) => {
            entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry];

            return entries;
        }, {});

        // Remove leading '/' from ExtractTextPlugin instances
        webpackConfig.plugins.forEach(plugin => {
            if (plugin.constructor.name === 'ExtractTextPlugin') {
                plugin.filename = plugin.filename.replace(/^\//, '');
            }
        });
    }
});

[nickfederighi]

@ikristher did the fix work for you?

[vahidrk]

I have exactly the same problem,

Laravel Mix Version: 4.0.14
Node Version (node -v): 10.15.0
NPM Version (npm -v): 6.4.1
OS: Windows 8.1

[ikristher]

@nickfederighi yes the fix worked for me.

[domstubbs]

I’ve just run into a similar issue and after experimenting with lots of tweaks, including the suggestion above, the problem seemed to stem from a conflict between HMR and mix.version(). Once I moved that function into an inProduction() condition HMR started working reliably again.

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

I haven’t seen this mentioned elsewhere and maybe it was just a one-off glitch with my environment, but if you’re seeing a similar issue it’s worth a try.