Comments (13)
Just got merged 😊
from livereactload.
By default, the new livereactload
assumes your code is idempotent (can be run over and over without issue) and the inject-tap-event-plugin
is not idempotent. Wrap it in a try catch block.
from livereactload.
I think the cause of this issue might be that the factory function (DOM.G.contactButton
) is bound in the component's constructor. Hence react-hot-loader
can't intercept the function call and proxy the return value correctly.
How about if you extracted the contact button to its own separate stateless component? Would that work as expected? Something like this:
class MainApp extends Component
{
constructor(props)
{
super(props);
this.DOM =
{
G : // generator functions
{
contactButton : (p) =>
<ContactButton {...p} btnClass={this.classes.contactButtonContainer} />
}
};
}
render ()
{
return (
<div className="appWrapper">
<div className="mainContent">
<AppHeader/>
<div>- insert body content here -</div>
</div>
<div className="appFooter">
{this.DOM.G.contactButton(
{
className : 'mdi mdi-github-box',
url : 'http://somewhere'
})}
{this.DOM.G.contactButton(
{
className : 'rc3 rc3-npm-box',
url : 'http://somewhere'
})}
{this.DOM.G.contactButton(
{
className : 'mdi mdi-code-tags',
url : 'http://somewhere'
})}
</div>
</div>
);
}
}
function ContactButton({url, className, btnClass}) {
return (
<Button className={btnClass}
onClick={()=> {location.href = url}}>
<i className={className}/>
</Button>
);
}
from livereactload.
Thanks for the thoughtful reply. I have actually resorted to doing just that. One reason why I had done things this way is material-ui
now uses JSS and has to be compiled with a context binded to the style for classNames (I mean, I don't have to use JSS, but for the sake of consistency within these apps). I'm not sure if the technology within JSS that re-writes CSS to the DOM would have slowdown with more sheets generated per render to do that.
But I guess a little more boiler-plate here and there won't be the end of the world. Thanks 😄 👍
from livereactload.
This is fixed in livereactload@next
. Another next
to add to your list. 😄
See upgrade instructions here.
from livereactload.
Amazing! Thanks for the quick reply :) Checking that out and will close right after.
from livereactload.
Tried to follow the guide. Unfortunately, I am experiencing the following when trying to run my gulp setup now:
Unknown plugin "react-hot-loader/babel" specified in "base" at 3, attempted to resolve relative to "..."
[double checked and upgraded all babel related dependencies to the latest :/]
from livereactload.
So I found the issue with that -- Just needed react-hot-loader@next
!
Getting a familiar feeling here... 😄
Another thing now, it is still not refreshing/updating in the example case I provided, but I am also getting an invariant violation for including inject-tap-event-plugin
more than once which was included as it continues to load the client app over and over again. I will try to alleviate that issue to see if it's what is causing it or whether it's livereactload
at this point.
from livereactload.
thanks for the elegant solution.
[edit: nevermind :)]
from livereactload.
To update: there are no more issues that might be conflicting with the build, but the issue posted above still seems to be there unfortunately 😐 It seems elements that aren't declared explicitly within an ES6 Component's render method are not reloaded/checked for changes. Is there a flag to always update when a bundle changes (and if not, is it possible)? The bundle change is detected, but the library simply decides there's no changes even though there are.
Right now the console is outputting this on these sorts of updates:
LiveReactload :: Reload complete!
build.js:348 LiveReactload :: Bundle changed
build.js:348 LiveReactload :: Nothing to reload
from livereactload.
To update: there are no more issues that might be conflicting with the build, but the issue posted above still seems to be there unfortunately
Do you mean the reload problem or inject-tap-event-plugin
error?
from livereactload.
Sorry for the ambiguity there -- the reload issue described/#154.
For now, at least functional Components don't have so much boilerplate for the specific example I brought up above. It might be something to keep an eye out for of since these things aren't generating reloads though.
from livereactload.
Apologies for the delay and for suggesting that the new beta would fix the issue. I got it confused with a different fix.
However, I recreated your code with react-hot-boilerplate
here and it doesn't work even with the webpack non-LiveReactload approach.
The advantage of the new 4.x LiveReactload is that you will get these fixes from react-hot-loader
rather than from us.
from livereactload.
Related Issues (20)
- Working with rails HOT 5
- Reload Complete, but no changes in HTML HOT 6
- (notsureif) Question about implementation, or bug. HOT 2
- Examples are broken HOT 2
- Loads two different modules HOT 1
- Source map path/filename issues HOT 4
- Option to disable transform warning HOT 5
- Multi-bundle support HOT 4
- rev=<revision_number> added to hot-reloaded module path results in Chrome not pausing on breakpoints HOT 15
- Add link to up-to-date Redux example HOT 2
- template literals in npm module HOT 4
- Gulp process does not exit when running tasks. #90 HOT 1
- MdDialog unit test nativeElementnot updated
- Always loading react-hot-loader production AppContainer HOT 3
- Add module.onAnyUpdate hook that triggers every time after reloading event HOT 1
- README "Demo" thumbnail image missing HOT 1
- Support of react-hot-loader v4.0 HOT 2
- livereload when chart components are updated HOT 1
- Does not work with browserify-global-shim HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from livereactload.