Comments (19)
It is weird, I tested it and it should work. As soon as I have a moment I will try to run your project to see what's going on.
from loadable-components.
Yes as mentioned in RHL readme.
Yes I know that is very annoying... I would try to find a fix.
from loadable-components.
@neoziro Oh I think I know the reason. Because of the react-router's route config API so I'm using <AppContainer>
instead of hot(module)
. Can loadable-components works with <AppContainer>
way? I think it's annoying to use both <AppContainer>
and hot(module)
...
from loadable-components.
It can be reproduced via this branch.
from loadable-components.
I can confirm: it have the same issue that is resolved with react-hot-loader
, but not without it, whether the config hotReload
is enabled or not.
from loadable-components.
Oh maybe I was not clear but React Hot Loader is still required. But it is not required to put hot(module)
in all loadable components.
from loadable-components.
@wellyshen problem solved? branch disappeared
from loadable-components.
@neoziro Not yet. Sorry I moving the repo to master. And this issue still can be reproduced via it.
from loadable-components.
@wellyshen @neoziro same error with version 1.3.0
from loadable-components.
@tommyalvarez what error?
from loadable-components.
@neoziro the one on this issue, that components loaded through this library are not hot reloaded unless you do something like this:
// Component split-code (lazy load)
let Dashboard = loadable(() => import('./Dashboard'))
let SignIn = loadable(() => import('./SignIn'))
let PasswordReset = loadable(() => import('./PasswordReset'))
let PasswordResetEdit = loadable(() => import('./PasswordResetEdit'))
// Needed for HMR
if (__DEV__) {
Dashboard = hot(module)(Dashboard)
SignIn = hot(module)(SignIn)
PasswordReset = hot(module)(PasswordReset)
PasswordResetEdit = hot(module)(PasswordResetEdit)
}
Notice the Needed for HMR
comment part, had to do that in order for HMR to work on those modules. Otherwise i would change code and the UI won't until i had refresh the browser
from loadable-components.
@neoziro now i have a strange bug that no matter the route, it will always load the same Component. I think it has something to do with this: https://stackoverflow.com/questions/44349667/react-router-v4-rendering-wrong-component-but-matching-correctly but since i'm not following the same pattern i'm not finding a clear way to solve it :S. If i remove the if (__DEV__)
block, it works okay but no hmr :(
from loadable-components.
You setup is not good, "module" must be the dist module, you have to put it in each file: "Dashbord.js", "Signin.js", etc...
But it should work without it, it is weird.
from loadable-components.
@neoziro Oh, but if i do that, will it work once in production mode where there is no hot reload ?
I verified now and it works BUT i need to make two modifications to the file, it's like it falls one step behind. I have to make two different changes to the file for the HMR to work.
from loadable-components.
@wellyshen just tested it and it works in your project. Is the problem solved?
@tommyalvarez I tested it and Hot Reload works out of the box. Be careful of following all three steps: https://github.com/gaearon/react-hot-loader#getting-started
I close it, if Hot Reload does not work it is a problem of React Hot Loader setup.
from loadable-components.
@neoziro It works with a component which is wrapped by hot(module)
. The component (e.g. Home) can't work without hot(module)
in v1.3.0.
from loadable-components.
You can remove hot(module)
in Home. I just tested it and it works. Only one at the root (App) and everything works.
from loadable-components.
@wellyshen I am not sure, I think hot(module)
is required, sorry..
from loadable-components.
@neoziro OK, I got it. Thank you for your time 👍
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
- Race condition
- Support the chunkName method
- Can use this package for React Native?
- Duplicate app when hydrate HOT 3
- 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.