Chunk disappears on hot module reload

The universal-component works fine initially, loading the chunk on route change, but whenever I update the lazy-loaded component (“Home.js”), it just disappears. universal-component doesn’t report any errors, and Webpack just tells me App and Home has been updated and everything is fine. Am I missing something in my config, or do you have any suggestions as to why it’s happening?

.babelrc

{
	"presets": [["env", { "modules": false }], "react", "stage-2"],
	"plugins": ["react-hot-loader/babel"]
}

index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { AppContainer } from "react-hot-loader";

import "./styles/App.scss";
import App from "./components/App";

const renderApp = Component => {
  render(
    <AppContainer>
      <BrowserRouter>
        <Component />
      </BrowserRouter>
    </AppContainer>,
    document.getElementById("root")
  );
};

renderApp(App);

if (module.hot) {
  module.hot.accept(["./components/App"], () => {
    renderApp(App);
  });
}

App.js

import React, { Component } from "react";
import { Route } from "react-router-dom";
import universal from "react-universal-component";

// Sync components
import TopBar from "./shared/TopBar";

// Async components
const Home = universal(props =>
  import(/* webpackChunkName: 'home' */ "./Home.js"), {
    chunkName: "home"
  }
);

class App extends Component {
  render() {
    return (
      <div id="App">
       <TopBar />
        <main>
          <Route path="/test" component={Home} />
        </main>
      </div>
    );
  }
}

export default App;

[olslash]

this happened to me until i added babel-plugin-universal-import to my build. kind of hidden in the middle of the readme, if you ask me 😛

[faceyspacey]

Doin a little cleanup. I’m going to close this. Feel free to re-open or continue the conversation if you discover any more relevant info.