Laravel-mix: Hot Module Replacement not working with React (reloads the page)

[morrislaptop]

• Laravel Mix Version: 1.0.7
• Node Version (node -v): v8.1.2
• NPM Version (npm -v): 5.0.3
• OS: Mac 10.12

Description:

Trying to enable this, however it reloads the page whenever the JS is recompiled. Is this supposed to work out of the box?

Steps To Reproduce:

1. Clone https://github.com/morrislaptop/laravel54-react
2. Run npm install
3. Run npm run hot
4. Load website in browswer
5. Make a change to resources/assets/js/components/Example.js
6. Observe browser reloads instead of HMR

[morrislaptop]

?

[pderiy]

Hi,
I have the same issue with AngularJS using TS.

[xiomai]

I've had this issue before which was fixed by adding this lines at the end of my root react js file:

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

it also works if I put it in resources/assets/js/app.js [Laravel 5.4 Environment]

[oneso]

You can install this: babel-preset-react-hmre and add a .babelrc file with:
{ "presets": ["babel-preset-react-hmre"] }

[pderiy]

@oneso what is about AngularJS with Typescript?

[oneso]

Sorry i am not familiar with AngularJS. But i just set up webpack + react + typescript + hot reload. But this would be complete out of topic.

[patrickomeara]

@oneso Can you point anyone looking for webpack + react + typescript + hot reload in the right direction?

[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.