Comments (7)
Thanks for getting back on it.
Will try to upload something for you to review based on your redux branch. Will keep you informed
from react-async-component.
Thanks for the report @kikoanis
I'll review these and make sure the cases are covered in the next batch of tests I plan to write.
from react-async-component.
Hi @kikoanis!
I am reviewing your issue. A couple of questions...
Not sure what rehydrateState.resolved[id] is referring to, but in the case of rehydrateState.resolved not defined it throws an error which I guess you should guard against its null-ability.
Have you experienced an undefined error?
I think you kill state rehydration too soon before it gets to the client.
Currently to get around this I only requery store.getState() which is not ideal.
I am a bit confused on this one. I believe store.getState()
is against the redux store, if so this should not be affected by the line you have highlighted. The line in question is to remove the state that is used by this library when rehydrating a client with the async components that were resolved in a server render. This data is only needed once, and we therefore destroy to avoid issues with hot reloading and/or remounting cases.
from react-async-component.
Have you experienced an undefined error?
This is the error message I am getting
Which I tracked it down to line 84 in the compiled file
I am a bit confused on this one. I believe store.getState() is against the redux store
Yes it is.
This data is only needed once, and we therefore destroy to avoid issues with hot reloading and/or remounting cases.
I know this is for the client to use the server state only the first time. But the problem is that the client is not getting it first time. Not sure if we need the client to destroy it rather than the server, may be by replacing this line
state: { resolved: execContext.getResolved() },
by this
state: typeof window !== 'undefined' ? { resolved: execContext.getResolved() } : rehydrateState,
from react-async-component.
Hmm, something definitely sounds off here. It appears the state is not being configured properly for your environment. Is there any chance you could share your configuration with me so that I can review?
from react-async-component.
doh... this will take sometime as the redux branch is way behind and the project I am working on is private one and I am afraid I am not in a position to share it.
Anyway. On the server side what I am getting as a state is only this
{
resolved: {
'1': true
}
}
There is no elements of the other store state which is why I am doing Store.getState() again on the client side. Obviously this defeats the whole idea of SSR, doesn't it?
You may be right about the possibility of mis-configuration on our side so I will try to update the redux-opinionated branch to get a solid example to debug and review.
from react-async-component.
OK... So I think I managed to resolve the issue for now by adding a new reducer entry for "resolved" as an empty object into the redux store. The "resolved" entry is mentioned in the withAsyncComponent.
Still not sure if the "resolved" entry is for tracking changes between server and client internally, why we still need it in the redux store.
Unless I am missing something else not obvious in your react-universally@next
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.