-
Notifications
You must be signed in to change notification settings - Fork 60
Pages don't hot reload when not using grommet-udacity App component #64
Comments
Hey @daan-nguyen , that's odd I have never seen that before. Maybe you can get rid of the App component and just surround the component with a regular div? I found this as a potential guide to solving it located here. I am working on finishing up a project right now, but I will try to see if I can reproduce this later on tonight. It sounds like the Routes are someone being dynamically changed and thus can't be hot-reloaded due to an error of some sort. See if that link helps and if not, I will see what I can do later tonight. |
Awesome, thanks for the lead. Yeah it strikes me as maybe we're missing something when we strip away the current components. Will have a bit of a dig down this line |
Looks like that was the right track, we've been able to resolve it as per this comment by adding a random key onto the router in Whilst this results in a reset of any component state, it doesn't appear to affect redux state which is probably the more important one |
Hey @daan-nguyen. this must be a brand new issue since now I am seeing it for the first time ever in other apps of mine. I think the best solution comes at the end of that comment feed. The idea is to use the built in AppContainer from React Hot Loader. See here. I will be updating my projects this coming week with this solution. Let me know how it goes for you! |
@daan-nguyen I've updated the sans-apollo branch with these fixes. Thanks for your patience. See here. |
This is resolved, I believe, so I am going to close it. Please reopen it if you have any more issues. |
Oddly I tried this and it doesn't seem to resolve it for us, class AppContainer extends Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<ReactHotLoader>
<div>
{React.cloneElement(this.props.children, this.props)}
</div>
</ReactHotLoader>
);
}
} In any case we're able to get around it with the router key so I'm happy enough with that for the time being, we might revisit it a little later down track when |
You're quite welcome @daan-nguyen . That's very strange. I would imagine that it's your node version, but I can't say for sure. I'm sticking with 6.9.1 until the react packages stabilize on later versions. Let me know if there is anything else that I can do to help. |
We're trying to remove the grommet-udacity dependency and have come across a seemingly odd issue that we haven't been able to quite figure out.
AppContainer/index.js
importsgrommet-udacity/components/App
to act as an basic component wrapper. Judging from the source for App.js here, it looks like a pretty standard 'dumb' component. We have replaced it with what is effectively adiv
for the time being.However, this results in changes to
pages
no longer causing a visual refresh in the browser. HMR appears to run, as the normal console logs occur and there are XHR network logs and logs of the.json
from the hot update.js
being pulled (where you can actually see the changes in the code) but visually it doesn't update without a hard browser refresh. Changes tocomponents
andcontainers
visually update fine.The only new warning that shows up is one from
react-router
:browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored
However, this warning exists for
components
andcontainers
too and it doesn't prevent them from visually updating.Putting the original
App
import fromgrommet-udacity/components/App
appears to resolve this issue. I'm pretty stumped as to why this may be happening or whatApp
fromgrommet-udacity
does differently. We're making use of thesans-apollo
branch with only some initial cleanup changes so far, found here.We are using:
The text was updated successfully, but these errors were encountered: