server side rendering issue with universal component

It might be silly but with the following code config, it is not working if i import pages via props. When i try to load http://localhost:8080, Home page is not rendering from server but later on gets rendered from client properly. This is the repository I am referring to. You can check the code.

import React from "react";
import { Route } from "react-router-dom";
import universal from "react-universal-component";
import { Switch, Redirect } from "react-router";
import Nav from "../Components/Nav";
import "../assets/css/globals.css";
import { Helmet } from "react-helmet";
import Loading from "../Components/Loading";
import NotFound from "../Views/NotFound";

const UniversalComponent = universal(
  props => import(`../Views/${props.page}`),
  {
    loading: () => <Loading />
  }
);

export default () => (
  <div>
    <Helmet>
      <title>React SSR Boilerplate</title>
    </Helmet>
    <Nav />
    <Switch>
      <Route exact path="/">
        <UniversalComponent page="Home" />
      </Route>
      <Route exact path="/about">
        <UniversalComponent page="About" />
      </Route>
      <Route exact path="/article">
        <UniversalComponent page="Article" />
      </Route>
      <Route>
        <NotFound />
      </Route>
    </Switch>
  </div>
);

[ScriptedAlchemy]

Fixes are being worked on for chunk mismatch’s.

This library family has grown significantly in popularity- as such I needed to look at an update to try and normalize the chunk resolution

[kyle-johnson]

Based on a similar problem, I have a suspicion this is related to how webpack/babel interact in some configurations. Try this:

const UniversalComponent = universal(
  props => import(`../Views/${props.page}`),
  {
    loading: () => <Loading />,
    testBabelPlugin: true  // hack around this by using a debug feature
  }
);

If that succeeds, then the issue is the Babel plugin isn’t calling its hook early enough. You can call the hook yourself by sticking this at the top of your server file or perhaps before any use of universal:

import { setHasBabelPlugin } from "react-universal-component";
setHasBabelPlugin();