I am having a problem with react hot loader 3.
Some modules in my app get hot updated some don't. I have a folder(app) which contains all my components. In this folder i have index.js where i export all modules from the folders. In the folders i have index.js
file which exports component itself.
Example:
app/test
contains test.js
and index.js
app/test/index.js
contains export test from ./test.js
app/index.js
contains export * as test from ./test
And somewhere in my app i import this test app like this import { test } from ../app
And here where the magic shows up. hmr does not work for test.js. But if i comment line export * as test from ./test
in app/index.js
and i import my test component directly import test from ../app/test/test.js
hmr works. I've been trying to fix it for 3 days now. app/index.js
gets imported in my routes.js
file. It's the only place where it gets imported. Only all components in app
folder don't get hot updated everything except it works fine. I tried to reproduced it with any boilerplate and it didn't work out.
In the console i see
[WDS] App updated. Recompiling...
log-apply-result.js?d762:11 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
log-apply-result.js?d762:18 [HMR] Nothing hot updated.
only-dev-server.js?2f87:49 [HMR] App is up to date.
client?e36c:37 [WDS] App updated. Recompiling...
client?e36c:37 [WDS] Nothing changed.
The problem was with folders' structure. Circular dependencies failed hmr. Fixing it fixed problem.