Laravel-mix: [HMR] Cannot apply update. Need to do a full reload!

[pbgneff]

• Laravel Mix Version: 4.0.15
• Node Version (node -v): 10.15.3
• NPM Version (npm -v): 6.4.1
• OS: macOS Mojave (10.14.4)
• Laravel project using Valet

Description:

When I run npm run hot any .js file changes made trigger the following:

[HMR] Cannot apply update. Need to do a full reload!
Error: Aborted because {file} is not accepted

and then the whole page is reloaded losing state.

Key points:

• I am only using ES6 for my frontend, no framework. As in I am using modular development and using the mix.js build method as oppose to mix.scripts

Below is my webpack file:

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

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.js')],
    });

if (process.env.npm_lifecycle_event !== 'hot') mix.version();

Steps To Reproduce:

1. npm run hot
2. Change anything in any .js file
3. Error from above triggers and the whole page gets reloaded.

[pbgneff]

So after doing some research I added these lines to the bottom of the build file resources/assets/js/app.js:

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
}

It has resolved the [HMR] Cannot apply update. Need to do a full reload! error, but the changes bubble up through all of the modules and everything gets refreshed anyways. So I'm not sure if this is the right solution yet.

Is that line required for npm run hot

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.