Comments (23)
A disclamer about this in README.md
could save some time and headaches
from loadable-components.
Hello, can you please give me the full environment? 6553 is very huge number, I don't think you have 6553 code splitted modules!
from loadable-components.
I have only 4 chunks. I can't show you full code because I already switch it to my own solution.
from loadable-components.
Can you describe some parts of business logic?
- server renders html after
getLoadableState()
which needed forloadableState.getScriptTag()
getScriptTag()
return some components IDs- page loads,
loadComponents()
loads components with IDs from previous step. Why do we need that? I thought thatBrowserRouter
should load modules according to routing.
So, why we need loadComponents
and components IDs
when we have BrowserRouter
from loadable-components.
It is needed to prevent the page blink at load. We have to require all modules before starting to render application.
from loadable-components.
I think you have a problem of server-side module caching, that's why the id is 6553.
from loadable-components.
I render server side (in development) using babel-node without webpack. Maybe problem there. What do you think?
from loadable-components.
I am doing the same and I don't have any problem...
from loadable-components.
Have you solved your problem? I would be happy to see all the stack to understand the problem. Do you have Hangout?
from loadable-components.
I didn't solve it. I move to my own solution. It's more verbose but without loop over the components tree. I download component corresponding to current route.
Client and server render also without promise resolving. Several routing files allows to achieve that.
from loadable-components.
@max-mykhailenko not very scalable but it works ;)
from loadable-components.
I'm having this same issue. Any resolution to this?
from loadable-components.
Seems like componentTracker.get(id)
is empty. Also the id seems to change every render, even on the same page, so maybe loadable state is out of sync somehow?
from loadable-components.
Yes probably, I need to investigate it more deeply. Do you have any example repo to reproduce it?
from loadable-components.
I also have it, so far I see that I have 16 bundles and it fails when it tries to get bundle with id 17 that doesn't exist.
Added:
When I change to only one dynamic bundle it tries to get bundle with id 1 and fails.
Seems like loadable() is called twice in some cases therefore track() is called twice and id becomes incorrect
from loadable-components.
I have to investigate it. I think the approach is too simple and weak. Approach taken by react-loadable is heavier but probably more resilient.
from loadable-components.
Possible solution could be also passing this id as an argument for loadable() and using this passed id not only for inner reference but also as generated bundle name (instead of 0.js, 1.js etc). Maybe it would be also an idea to investigate why loadable() is called this one additional time. Sorry didn't have time to dig deeper, have a lot of pressure on work and your library was a big help, thank you very much! :)
from loadable-components.
I discovered one more problem with Symbol(loadable)
in index.js:115
in check instance.constructor[_constants.LOADABLE]
. If you inspect instance
in chrome dev tools you can find field Symbol(loadable)
in the object, but if you try to access it - it returns undefined. The problem is reproducible only on production(webpack) build on server side.
from loadable-components.
Same issue here.
In my case the reason (I guess) is that I have used loadable
in non-main chunk, so component tracker don't know about this component when loadComponents
called.
So it seems like all loadable
calls should happen in main chunk.
from loadable-components.
It is a known issue, unfortunately I would not be able to solve it without a Babel plugin or some additional code. Still thinking about a simple way to do it.
from loadable-components.
Would there be a easy way to disable code splitting on dev, based on some environment variable or webpack config? I don't mind not having code splitting during dev, it's more important that I don't have to kill the server to be able to refresh the page.
from loadable-components.
@FabioAntunes the next version of React Hot Loader will be compatible with Code Splitting. I think about a way to make it compatible with loadable-components
with zero config.
from loadable-components.
This long issue is now solved in v1. I close this issue because it was relative to the previous version. Feel free to open an issue if you experience any problem with the new fresh v1 of loadable-components.
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 4
- 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.