Comments (14)
I'm also having this problem. Any chance of getting this fixed?
from react-async-component.
Here's a repo where it occurs: https://github.com/mschipperheyn/react-universally/tree/styled-components-762
In this case, it;s related to styled components 2.0.0: styled-components/styled-components#762
@ctrlplusb I noticed that if I referenced a process.env.variable within the async component, I get an infinite loop.
from react-async-component.
Just had another case. I am using react universally. My website responds to project.com and www.project.com but I had not been entirely consistent in using one or the other. In any case, when I was on project.com everything was fine, but on www.project.com after an initial load, it went into that loop. Perhaps it had something to do with using the canonical meta tag in Helmet. I'm not sure.
from react-async-component.
@ctrlplusb I've tracked this down the HRM workaround in asyncComponent.
render() {
if (
sharedState.module == null &&
!this.resolving &&
typeof window !== 'undefined'
) {
this.resolveModule()
}
if (error) {
return ErrorComponent ? (
<ErrorComponent {...this.props} error={error} />
) : null
}
[...]
}
Whenever an error occurs resolving a component this.state.error = true
, however handling the error happens too late. As a result in an environment where typeof window !== 'undefined'
i.e. the browser, this results in an infinite render
loop.
I guess either the error handling needs to be moved above the this.resolveModule()
call, or the guard around it should take into account the error state.
from react-async-component.
Opened #60
from react-async-component.
@ctrlplusb - I have had difficulty making it happen on demand. It seems to randomly occur so there is simply error handling somewhere not being handled and it seems to retry non-stop
Seems like it is likely related to hot reloading in some way. Perhaps it is saving old chunks and when it fails it just fails non stop rather than refreshing or something - really not sure. I will definitely try to find out how to re-create it....
One way that i have seen it happen a lot is if the async component actually fails to render all together the loop will occur.
from react-async-component.
also ran into this. but hard refresh usually fixes it in my case. tho still not a viable solution to end users.
from react-async-component.
Hey @bradennapier and @andylhansen
Is there any chance you could put together a minimal repo example that reproduces this. Happy to help from there.
from react-async-component.
@mschipperheyn thank you for this valuable diagnosis. This will be very helpful!
I apologise yet again for my delayed responses. I have a lot going on at the moment, but will try. PR's gladly welcome if you reckon you may know the root cause. It'll likely have to be done against react-tree-walker
.
from react-async-component.
What are the thoughts on simply using the new import('./SomeComponent).then() syntax?
from react-async-component.
Hi, in my case I see the following loop. Can't reproduce it in dev environment.
from react-async-component.
I mean essentially the issue is that asyncComponent is the one catching the errors. Any error in the resolution of the component will cause an endless loop. I actually have been thinking this is more of an issue with webpack and it's retry logic when resolution fails but can't be sure really.
from react-async-component.
Awesome work @xzyfer! Are you up for creating a PR? Appreciate your time spent looking into this. 👍
from react-async-component.
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.