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)
- Add importEntrypoint to CunkExtractor and donβt load stats with require. HOT 9
- Hydration is not working sometimes on some pages HOT 7
- How use it express ssr + react-scripts. How create this file? '../dist/loadable-stats.json' HOT 1
- Loadable not accepting react-p5-wrapper as input HOT 7
- Component types are incompatible with React 18 HOT 2
- Loadable component SSR remote (localhost:port) HOT 2
- lazy typescript definition missing options argument: Expected 1 argument, but got 2 HOT 2
- Can't get `fallback` to display component HOT 3
- What is the best way to prevent failure to load component or catch properly? HOT 7
- getting Uncaught TypeError: Failed to resolve module specifier HOT 1
- loadable/component Synchronously Load Component Failed with Error "Cannot convert undefined or null to object HOT 2
- SassError: Undefined variable 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?
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.