How to get react-hot-loader working with dynamic imports? - reactjs

Question

I saw this answer which shows how to get react-hot-loader working with import() syntax, but in my case I don't know the filename until runtime.
Here's what I've got:
export default function(component, props, mountPoint) {
function render() {
import(`./containers/${component}`).then(({default: Component}) => {
ReactDOM.render(
<AppContainer>
<ErrorBoundary>
<Component {...props}/>
</ErrorBoundary>
</AppContainer>, document.getElementById(mountPoint || 'react-root'));
});
}
render();
if(module.hot) {
module.hot.accept('./containers', () => {
render();
});
}
}
The first load works fine, it's just the module.hot block that doesn't work. Chrome tells me:
Uncaught (in promise) Error: Cannot find module "./containers"
And my terminal tells me the same thing:
WARNING in ./node_modules/babel-loader/lib?{"cacheDirectory":"/usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader.js
Module not found: Error: Can't resolve './containers' in '/usr/local/myproject/assets/scripts/app'
If I try to accept ./containers/${component} then I get a runtime error instead:
Ignored an update to unaccepted module ./assets/scripts/lib/components/bpm/MyClientProcessMenu.jsx -> ./assets/scripts/lib/components/bpm/MyClientProcessMenuLoader.jsx -> ./assets/scripts/app/containers/MyClientProcessMenuContainer.jsx -> ./assets/scripts/app/containers lazy recursive ^./.$ -> ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":"/usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader.js -> ./node_modules/bundle-loader/index.js!./assets/scripts/app/react_loader.js -> ./assets/scripts/app recursive ./node_modules/bundle-loader/index.js!./ ^./.$ -> ./assets/scripts/lib/webpack.js -> ./assets/main.js -> 0
And no update occurs.
How can I "accept" a dynamic component?

Answer 1

I do not think that this is currently supported without duplicating a code. As a workaround, you can create two files one would be used for production with dynamic import and the second one would be without dynamic import for development.
The file with dynamic import has to be included only in production. That's the reason for moving the environment logic into the different file (index.js)
index.js
// Neded because HMR doesn't work with dynamic import for languages
let app;
if (process.env.NODE_ENV === 'development') {
app = require('./development').default;
} else {
app = require('./production').default;
}
app(component);
client.js
export default function(Component) {
function render() {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>, document.getElementById('react-root'));
}
render();
if(module.hot) {
module.hot.accept('./containers', () => {
render();
});
}
}
production.js
import client from './client';
export default function (component) {
import(`./containers/${component}`).then(Component => {
client(Component)
});
}
development.js
import client from './client';
export default function (component) {
const Component = require(`./containers/${component}`);
client(Component);
}