Comments (24)
Later discovered that for SSR intial render we need to extract loadable-id and set a loadable key on the loaded component. If not the component would not be included in the script-tag, and you will have a flicker with nothing on the screen after intial SSR render while client-side is taking over. I use Preact and Preact-compat in production and it works fine now.
// Your wrapped component
const MyAsyncComponent = loadable(() => import('./MyAsyncComponent/MyAsyncComponent'))
// In your router-file
import { LOADABLE } from 'loadable-components/constants'
// Utility to extract the wrapped component if loadable-HOC will conflict with your other HOCs
const loadableWrapper = (cb, LoadableComponent) => {
LoadableComponent.load().then((Comp) => {
// Add LOADABLE-key and loadable-componentId to the component you send back to react-router (v3)
Comp[LOADABLE] = () => LoadableComponent
Comp.componentId = LoadableComponent.componentId
cb(null, Comp)
}).catch((error) => {
console.log('Error loading', error)
})
}
<Route path='/some-path' getComponent={(nextState, cb) => loadableWrapper(cb, MyAsyncComponent)} />
from loadable-components.
The above code is with react-router v3, but with react-router v4 (and redux-connect) combining both the async Hoc and make the container lazyload is not possible. You need to re-organize your code having the Hoc above, and inside it lazyload the View with all heavy dendencies, like this:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { asyncConnect } from 'redux-connect'
import loadable from '@loadable/component'
import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'
const PageView = loadable(() =>
import(/* webpackChunkName: "PageView" */'./PageView')
)
@asyncConnect([
{
promise: ({ store: { dispatch, getState }, location: { pathname } }) => {
const promises = []
if (!isPageLoaded(getState(), pathname)) {
promises.push(dispatch(loadPage(pathname)))
}
return Promise.all(promises)
}
}
])
@connect(
state => ({
page: state.page.data
})
)
export default class PageViewContainer extends Component {
render() {
return <PageView {...this.props} />
}
}
from loadable-components.
Thanks for this :)
from loadable-components.
@gerhardsletten you're rock! Do you work around with react loadable and this issue? I can't repeat the same behaviour.
from loadable-components.
Hi.
Is this still the right way to work with asyncConnect'ed components? It seems like the load() method is not available on the loadable component.
from loadable-components.
I just updated my latest commend from 9 august with the new scoped package-name for loadable.
Mark that the load-method is from my own projects redux-ducks modules, it return a promise used within @asyncConnect to reflect when the pages content is loaded
...
import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'
from loadable-components.
Thanks. I am trying that now, it is not quite working yet for me. I am using react-router v3.2.1 and redux-connect v6.0.0, so I'm not sure if I should be using something more like the first example or the second one?
from loadable-components.
redux-connect just published v9 that supports [email protected] (new context api), maybe you need to update. Is it redux-connect and loading everything on server that is the problem, or is it the code-splitting that does not work?
from loadable-components.
from loadable-components.
Its hard to tell you what you do wrong without seeing some code, please provide that and I will look into it. But in the server, its important to call redux-connects loadOnServer
before ChunkExtractor
from @loadable/server
, and you can only do code-splitting below asyncConnect
from loadable-components.
Thanks again for your patient replies!
I found my issue. When I was re-factoring my code I had left some of the loadable/code-splitting code above an asyncConnect. I have re-factored it to put the asyncConnect around a wrapper which contains the loadable component as you had in your second example and it all works nicely now.
from loadable-components.
Great!
from loadable-components.
I just updated my latest commend from 9 august with the new scoped package-name for loadable.
Mark that the load-method is from my own projects redux-ducks modules, it return a promise used within @asyncConnect to reflect when the pages content is loaded
... import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'
Hey @gerhardsletten, can you please share what is inside your import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'
? I wan't to see how do you load the component.
from loadable-components.
I'm trying to solve Did not expect server HTML to contain a <div> in <div>.
this problem for about a week already and no success. On server, I did everything correctly, put ChunkExtractor
after loadOnServer
.
On the client, I wrapped hydration with loadableReady
, but whenever I add loadable to any route, it starts showing me the error above.
from loadable-components.
Here is the screenshot with the populated HTML from server
and this one is after hydration
from loadable-components.
this is our home page route, wrapped to our asyncConnectWithModifications
which is same as asyncConnect
from loadable-components.
@gloompi Taking a look at your screenshot, and I think the connected Component needs to be a regular react-component and not a "loadable"-component, so if you add
const Home = loadable(() => import('./Home'))
// Insert this
const HomeContainer = (props) => {
return <Home {...props} />
}
And at the end you pass this HomeContainer:
)(HomeContainer)
from loadable-components.
@gerhardsletten I have tried this approach as well, but it didn't work. I still think that it's related to async load somehow, can you share what were doing inside the redux? Especially the loadPage
action?
from loadable-components.
@gloompi Could you extract this into an example and share this on github? Getting it right with ssr also involves your babel-config, webpack setup and both your server.js and client.js entrypoint. Most likely you have something one places that cases this problem.
from loadable-components.
@gerhardsletten sure, I actually have opened an issue here #633.
And there you can find all the examples with configs.
from loadable-components.
@gerhardsletten if it's not enough, I can try to create a repo with similar configs
from loadable-components.
@gloompi It would be great if you could extract a runable example
from loadable-components.
@gerhardsletten hey, glad to inform you that the new version of loadable/components solved my issue. Thank you for helping, really appreciate it❤️❤️❤️
from loadable-components.
@gloompi Great, all good debug-sessions starts with npm update
;-)
from loadable-components.
Related Issues (20)
- problem with redial HOT 2
- How to change referencing external styles to preload mode
- Fallback running even when component has previously loaded HOT 1
- Webpack doesn't like @loadable/server 5.16.4 HOT 5
- Server is caching old request split chunks, and these are not being re-requested when a new request is made to the server.
- ctor.requireAsync is not a function error HOT 1
- Inline Chunk injection HOT 2
- Not working with latest @loadable/server & @loadable/babel-plugin `v5.16.0` version HOT 4
- How to lazyload a hook? HOT 3
- Fallback behaviour HOT 1
- Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component
- error in ./node_modules/@loadable/component/dist/loadable.esm.mjs HOT 9
- Why ChunkExtractor is required? HOT 3
- Is website sync with repo?
- If I am using react18, do I still need loadable-components HOT 6
- Add esbuild support HOT 3
- react-native-web SSR support HOT 1
- Loading state is always true on first render HOT 3
- Add query parameter support HOT 3
- SSR is broken for component v5.16.2+ HOT 6
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 loadable-components.