loadable-components breaks Hot Module Replacement (HMR)

🐛 Bug Report

HMR updates are not applied if components are imported with @loadable/component. By not applied, I mean that in Chrome console panel:

and network panel

you can see the update is there, but it’s not reflected in the DOM.

To Reproduce

In the linked repo, make sure the first line is commented, and change the text in ./LoadableComponents

// import LoadableComponents from './LoadableComponents'
import loadable from '@loadable/component'
const LoadableComponents = loadable(() => import('./LoadableComponents'))

If you change the code like this:

import LoadableComponents from './LoadableComponents'
// import loadable from '@loadable/component'
// const LoadableComponents = loadable(() => import('./LoadableComponents'))

Everything works as expected.

Expected behavior

Code splitting should work with loadable-components.

Link repo

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
 - Memory: 2.71 GB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
 - Yarn: 1.13.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/component: ^5.6.0 => 5.6.0

Nota bene

I’m happy to help.

[yasin749]

You can try to turn off code splitting in a local environment. new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),

[mathieux51]

Thank you both for your help. I didn’t know adding multiple hot was an option, fixed my problem. I will update the link repo with the recommended solution.