Changes not been propagated

[ThiagoFacchini]

Description

react-hot-loader seems to be doing everything right, it detect module changes and apparently update the modules, although the browser content doesn't reflect the code changes at all. No errors, no warnings.

Expected behavior

Browser content should be updated reflecting the changes.

Actual behavior

Console spits (e.g.):
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
XHR finished loading: GET "http://localhost:8080/df32ff4...hot-update.json.
[HMR] Updated modules:
[HMR] - ./src/library/protons/ModalWorkflow/sandbox/workflowStepOne.js
[HMR] - ./src/library/protons/ModalWorkflow/sandbox/index.js
[HMR] - ./src/configs/routes.js
[HMR] - ./src/views/intro/index.js
[HMR] - ./src/view/home/index.js
[HMR] - ./src/app.js
[HMR] App is up to date.

No Browser content changes.

Environment

React Hot Loader version: 4.8.0
react:16.8.3
react-dom: (patched by react-hot-loader ) - 16.8.3
webpack: 4.29.6
webpack-dev-server: 3.2.1

Run these commands in the project folder and fill in their results:

1. node -v: 8.15.1
2. npm -v: 6.9.0

Then, specify:

1. Operating system: OSX 10.14.5 (High Sierra)
2. Browser and version: Chrome 72.0.3626.121

Reproducible Demo

I didn't setup a project, I may be wrong but I strongly believe it is something to do with configuration, which follows below:

webpack-dev-server config
historyApiFallback: true,
hot: true,
stats: 'none',
quiet: true,
port: port,
host: host,

webpack config
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js',
],
resolve : {
alias: {
'react-dom': '@hot-loader/react-dom'
}
},

.babelrc
"plugins": [ "@babel/plugin-transform-flow-strip-types", "@babel/plugin-proposal-class-properties", "react-hot-loader/babel" ]

App component
import React, { Component } from 'react'
import { hot } from 'react-hot-loader/root'

class App extends Component<PropTypes, StateTypes> {
render (): React$Element<*> {
return (
<Router>
<Switch>
<Route
path="/home"
render={ (props: Object): React$Element<*> => <HomeView {...props } /> }
/>
<Route component={ IntroView } />
</Switch>
</Router>
)
}
}

export default hot(App)

my entry file
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

const appContainer = document.getElementById('appContainer')

if (module.hot) {
module.hot.accept()
if (appContainer) ReactDOM.render(<App />, appContainer)
else if (appContainer) {
ReactDOM.render(<App />, appContainer)
}

[theKashey]

I dont see any mistakes. All correct.

Anyway - try to remove following code from your index.ks

if (module.hot) {
module.hot.accept()
if (appContainer) ReactDOM.render(<App />, appContainer)
else if (appContainer) {
ReactDOM.render(<App />, appContainer)
}

should be just

ReactDOM.render(<App />, appContainer); // which by your conditions always exists.

[ThiagoFacchini]

Thanks for the quick answer @theKashey, although it didn't work.

I went a little further and added why-did-you-update library to the project (which you probably know), and for my surprise the components are 'apparently' re-rendering, although no visual changes. Check the screenshots attached.

And just below

I completely lost. I doesn't make any sense at all.

[ThiagoFacchini]

The only other 'thing' unusual on this project is the fact that we are instantiating socket.io for different purposes... this is my whole configuration for webpack-dev-server

const options = {
historyApiFallback: true,
hot: true,
stats: 'none',
quiet: true,
port: port,
host: host,
after: renderUserInterface(),
setup (app) {
const server = require('http').Server(app)
const io = require('socket.io')(server, {
pingTimeout: 60000
})

	`io.on('connection', socket => {
		console.log('socket id is ', socket.id)
		console.log('client connected')
		socket.emit('serverPing', 'emitting from server')

		socket.on('clientPing', data => {
			console.log(data)
		})
	})

	io.listen(3000, () => {
		console.log('io listening on *:3000')
	})
`}`

}

Which I commented out and didn't had any effect, but other than that everything else is pretty 'vanilla'.

[theKashey]

1. remove alias to hot-loader/react-dom
2. disable RHL

import {setConfig} from 'react-hot-loader';

setConfig({
 ignoreSFC: true,
 ignoreClases: true,
 // optional
 disableHotRenderer: true
})

3. hot is still working and shall properly hot accept HMR event and update your app with state lost.

If it would work - then something is broken inside RHL(try to unignore stuff, untill it got broken back)
If it would not - something is with webpack HMR.

[ThiagoFacchini]

Alright @theKashey, I run a few scenarios:

Scenario 1:
1 - Removed the alias "react-dom' : '@hot-loader/react-dom' from webpack config;
2 - Import setConfig and setConfig as per your example above.

Note: In this scenario I'm still exporting my application with export default hot(App)
Result: The first thing I noticed was in my console:
react-hot-loader.development.js?c2cb:2432 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.
I believe that's because we not rewiring the patched react-dom anymore.

As per my App, it didn't update at all, there were less re-rendering though as the screenshot below shows. This is my console:

Scenario 1 - Variation 1 (disabling ignoreSFC):
Again, following your advice I started to disabled the configurations, one by one.
react-hot-loader.development.js?c2cb:2432 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. staid in my console.

Again, nothing was updated on my App, no reload, no nothing other the this console (that looks fairly similar to the previous one

):

Scenario 1 - Variation 2 (disabling ignoreClasses):

Exactly the same, more warning about react-dom, very similar console and no App updates at all.

Scenario 1 - Variation 3 (disabling disableHotRenderer):
Alright, when I change the flag from false to true, I could see real changes on my console.log, basically all the components that should be rendered appeared in my console, although once again, absolutely NO UPDATE on my app.

Follow console (note the scollbar):

I was almost giving up and believing that there was something wrong my App, configurations, library versions or whatever, but then I decide try another scenario.

Scenario 2:
1 - Removed the alias "react-dom' : '@hot-loader/react-dom' from webpack config;
2 - Removed the import { hot } from 'react-hot-loader/root' from my app file;
3 - Removed the import { setConfig } from 'react-hot-loader' from my app file;
4 - Removed the setConfig as you suggested;
5 - The app file exports normal, without hot.

Basically I soft removed react-hot-loader, even though there's still a little bit of left over on webpack ('react-hot-loader/patch' at the entry configuration and "react-hot-loader/babel" at babel plugins.

For my surprise when I change the code, it loose the state, but the Application refreshes.

Interesting... during one of the refreshes I noticed a warning that was literally impossible to read, so I quickly changed my webpack-dev-server from hot: true to hotOnly: true, and that's what I got.

Which to me is kind of weird... by the way: WorkflowStepOne.js is the file I'm changing.

I really don't know what else I could have tried... Maybe something to do with react-router-dom? Just in case I'm using version 4.3.1.

That's it.
Thanks

[ThiagoFacchini]

Any ideas @theKashey ?

[theKashey]

Sorry, I've missed your report.

In short - no ideas. I never saw a problem like this. And look like Hot-Loader is installed correctly, as long as it's uninstalling changing things as expected.

For my surprise when I change the code, it loose the state, but the Application refreshes.

Could I kindly ask you for an example? If it's not quite public you can send me just zip file to play with.

[ThiagoFacchini]

Sure not problem, I sent you a link with the instructions, hope to hear back from you soon.

I hope it is something stupid that I did...

Appreciate your effort trying to help.

[theKashey]

Got it. Looking.

[ThiagoFacchini]

Great, let me know if you having any issues running it, I'll be online for the next couple hours.

Once again, thank you.

[theKashey]

1. Awesome tool
2. why-did-you-update shall be installed ONCE, and above hot. Right now it is ruining everything.

It's strange - you added it after having problems with update, but everything could be fixed by removing it.

[theKashey]

In your case on every HMR you were applying a new why-did-you upon existing one. It changes the Component structure, and breaks RHL, as long it adopts to a component only once.

So - remove why-did-you-update and it would be fixed

I will investigate how they could live together, but it could be not easy due to memoization inside why-did-you, which in your case, prevented new results to be shown.

[ThiagoFacchini]

Oh my gosh, so the installation is ok so long I remove why-did-you-update? Or install it above RHL?

What you referring to when you say awesome tool?

Thank you so much!!!!

[theKashey]

1. Atomic is awesome :)
2. why-did-you and RHL could be friends, only if

• ignoreSFCWhenInjected set to false is hot-patch is present (wrap SFC in proxies)
• why-did-you-update is installed before RHL, for RHL would hack createElement after it.

Create 2 files

(function() {
// trying to hide everything in a closure from babel plugin
// to not let it import RHL before
if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update');
  whyDidYouUpdate(require('react'));
}
})();

// patches.js
import 'why-did-you';
import 'react-hot-loader';

replace react-hot-loader/patch in your webpack by this file.

Probably would work, the trick is with babel plugin, which will add RHL import to the every file.

[alexseitsinger]

1. remove alias to `hot-loader/react-dom`

2. disable RHL

import {setConfig} from 'react-hot-loader';

setConfig({
 ignoreSFC: true,
 ignoreClases: true,
 // optional
 disableHotRenderer: true
})

1. `hot` is still working and **shall** properly hot accept HMR event and update your app **with state lost**.

If it would work - then something is broken inside RHL(try to unignore stuff, untill it got broken back)
If it would not - something is with webpack HMR.

After further investigation, I have found these instructions to fix my previous issue with time traveling after editing a components props (The hot update is received and correct, but the component either doesn't get updated or disappears). I have not had a chance to start re-enabling things to pinpoint the culprit yet, though.

[theKashey]

There is an issue which exists "with" hot-loader/react-dom - sometimes changes are really not propagated.

[alexseitsinger]

Interesting. I suspect that this is my issue. Do you have any idea when it will be fixed?

[theKashey]

Today - #1348
More information here - #1342 (comment)