Search code examples
reactjswebpackreact-hot-loaderhot-module-replacement

Hot module replacement does not work with some modules


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.jsand 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.

Solution

  • The problem was with folders' structure. Circular dependencies failed hmr. Fixing it fixed problem.