Comments (18)
All, I am almost done with 1.0.0-alpha.2
, which includes significant improvements towards supporting hot reloading, including React Hot Loader. So far it is working swimmingly, but I need to put it through some of my larger projects to know for sure.
This should land within a few days.
from react-async-component.
As a temporary workaround it started working when I replaced
<Match pattern="/" exactly component={IntroductionAsync} />
with the following:
<Match
pattern="/"
exactly
render={() => {
const AsyncComponent = createAsyncComponent({
resolve: () => System.import('./Introduction'),
})
return <AsyncComponent />
}}
/>
(EDIT: This workaround is not recommended and will cause rendering issues)
Any idea why it wasn't working when I had the code for createAsyncComponent in its own file?
from react-async-component.
Experiencing the same issue myself.
from react-async-component.
Ooops. The fix would be problematic as it recreates the binding for each render. I don't think that would be a good idea.
from react-async-component.
@swernerx I noticed that as well when I tried it and saw that the component was being lazy loaded again and again.
@ctrlplusb could this be a bug or an implementation issue?
from react-async-component.
Woops, replied on the wrong thread.
To be honest I expect RHL will give us issues but so far my personal experience has been okay. It would be good to document where and when the hot reloading stops.
Falling back to standard webpack hot reloading is more reliable, but you sacrifice state maintenance.
from react-async-component.
Yep, agreed with @swernerx - that workaround is not recommended. Your component will always be lazy loaded which could lead to render flashing.
from react-async-component.
Thanks, I edited my comment with a warning. Hopefully a real solution can be found.
from react-async-component.
Hi folks, I'm experiencing the same.
I'm working in a react-universally
repo from a month or so ago.
I just updated from code-split-component and left most of the rest of the app alone. I've followed the approach recommended in the README but I have the same issue as above - HMR logs in console with no actual updates.
from react-async-component.
There was an issue with HMR 3 but that has been fixed now gaearon/react-hot-loader#303 - is that what you are seeing?
from react-async-component.
It works great for me with react-hot-loader and current or alpha version of react-async-component.
I use this piece of code:
import 'babel-core/register';
import 'babel-polyfill';
import FastClick from 'fastclick';
import React from 'react';
import {render} from 'react-dom';
import {createRenderer} from 'fela';
import {Provider} from 'react-fela';
import {AsyncComponentProvider} from 'react-async-component';
import injectTapEventPlugin from 'react-tap-event-plugin';
import {AppContainer} from 'react-hot-loader';
import Root from './app/Root/index';
import configureStore from './app/configureStore/index';
const store = configureStore();
FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const root = document.getElementById('root');
const renderer = createRenderer();
const mountNode = document.getElementById('stylesheet');
const app = <AsyncComponentProvider>
<Provider renderer={renderer} mountNode={mountNode}>
<Root {...{store}} />
</Provider>
</AsyncComponentProvider>;
const renderHotApp = (RootElement) => {
render(<AppContainer key={Math.random()}>
<AsyncComponentProvider>
<Provider renderer={renderer} mountNode={mountNode}>
<RootElement {...{store}} />
</Provider>
</AsyncComponentProvider>
</AppContainer>, root);
};
if (process.env.NODE_ENV !== 'production') {
if (module.hot) {
module.hot.accept('./app/Root/index', () =>
System.import('./app/Root/index').then(module =>
renderHotApp(module.default),
),
);
}
renderHotApp(Root);
}
else {
render(app, root);
}
Note that I use:
<AppContainer key={Math.random()}>
Otherwise, the async-ed components are not loaded.
I use react-router v4 and react-fela :)
from react-async-component.
Hey all;
React hot loader works with alpha-2 release 🎉
I'll be updating the next
branch of react-universally
soon.
from react-async-component.
Hey @ctrlplusb I've just tested the alpha-2 release, it is the same for my settings.
I still need to put:
<AppContainer key={Math.random()}>
Is this normal?
from react-async-component.
Hmmm, no that shouldn't be the case, but RHL can be very fidgety to get working, and there are definitely some cases where it won't work at all.
Take a look at my starter kit for an example of how I set it up. I have it hot reloading in there pretty well. 👍
from react-async-component.
Thank you @ctrlplusb
I've just looked at your setup and tried to reproduce it but I have the same issue.
I need module.hot.accept
and key={Math.random()}
But I used one of your file which is very clever ReactHotLoader.js
-> https://github.com/ctrlplusb/react-universally/blob/d71b1e4475b31155260ea7ad3d793890aef5aed4/client/components/ReactHotLoader.js
My new setup is now simplier:
/* globals document */
import 'babel-core/register';
import 'babel-polyfill';
import FastClick from 'fastclick';
import React from 'react';
import {render} from 'react-dom';
import {createRenderer} from 'fela';
import {Provider as FelaProvider} from 'react-fela';
import {AsyncComponentProvider} from 'react-async-component';
import injectTapEventPlugin from 'react-tap-event-plugin';
import ReactHotLoader from './ReactHotLoader';
import Root from './app/Root/index';
import configureStore from './app/configureStore/index';
const store = configureStore();
FastClick.attach(document.body);
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const root = document.getElementById('root');
const renderer = createRenderer();
const mountNode = document.getElementById('stylesheet');
const renderApp = RootElement => {
const app = <ReactHotLoader key={Math.random()}>
<AsyncComponentProvider>
<FelaProvider renderer={renderer} mountNode={mountNode}>
<RootElement {...{store}} />
</FelaProvider>
</AsyncComponentProvider>
</ReactHotLoader>;
render(app, root);
};
if (process.env.NODE_ENV !== 'production' && module.hot) {
module.hot.accept('./app/Root/index', () =>
System.import('./app/Root/index').then(module => renderApp(module.default)),
);
}
renderApp(Root);
My RootElement includes the Router because it is different when I'm in dev or prod environment ;)
from react-async-component.
"react-async-bootstrapper": "^1.1.2",
"react-async-component": "^1.0.2",
"react": "^16.0.0",
"webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0",
I still need to put:
<AppContainer key={Math.random()}>,
If I do not, it will not work properly, always second times to take effect(如果不这样做,它会不正常工作,总是第二次才生效)。
from react-async-component.
I also need to use <AppContainer key={Math.random()}>
, but I've noticed reloading works fine without it for components not connected to redux. Connected components only reload for every other change.
from react-async-component.
Fyi, connected components only reloading every other change is no longer an issue with react-hot-loader 4 beta 7.
from react-async-component.
Related Issues (20)
- if more the one same async components are rendered in same page, only one will be rendered
- Chunk rendered in the server is requested in the client again HOT 1
- Need Help : How can I solve "System is not defined" HOT 5
- Error walking your react tree HOT 1
- No-match routes rendered during async loading HOT 1
- Combining with <link rel="prefetch" /> results in loading async components twice
- Upgrade to support react-async-bootstrapper 2
- App component rendered twice because of AsyncComponentProvider wrapper in RU
- Solved : Flashing LoadingComponent and render twice
- getErrors missing after migration to 2.0.0
- When used with react-hot-loader, async component gets stuck on the loader HOT 3
- Async component not rendering on directly open page
- Client error: Failed to resolve asyncComponent on Safari 11.1
- React.Children.only seems to fail on IE11 HOT 1
- Is it possible to load the async'd components from a custom URL? HOT 1
- Two same simultaneously async components HOT 5
- Informing about React.lazy() HOT 2
- Cannot read property 'helmetInstances' of undefined HOT 3
- migrate to New Context API
- Error async-component, state not reloaded after error
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 react-async-component.