title: React loadable not rendering component, only displaying the Loading function
body: <p>I am using React Loadable to show a quick loading message in between displaying components. However, in production, it is not displaying the component and is only showing the "Loading..." message. For some reason, it works locally (localhost:3000), but it won't render when tested in a live environment. </p>
  
  <p>This is the code i have thus far: </p>
  
  <p>routes.js</p>
  
  <pre><code>// Loading function component
  function Loading() {
    return &lt;div&gt;Loading...&lt;/div&gt;;
  }
  
  const Compose = Loadable({
    loader: () =&gt; import('./views/Apps/Email/Compose'),
    loading: Loading,
  });
  
  const Inbox = Loadable({
    loader: () =&gt; import('./views/Apps/Email/Inbox'),
    loading: Loading,
  });
  
  const Message = Loadable({
    loader: () =&gt; import('./views/Apps/Email/Message'),
    loading: Loading,
  });
  .....etc
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>function Loading() {
    return &lt;div&gt;Loading...&lt;/div&gt;;
  };
  
  const DefaultLayout = Loadable({
    loader: () =&gt; import('./containers/DefaultLayout'),
    loading: Loading,
  });
  
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;Switch&gt;
          &lt;Route exact path="/login" name="Login Page" component={Login} /&gt;
            &lt;Route exact path="/register" name="Register Page" component={Register} /&gt;
            &lt;Route exact path="/404" name="Page 404" component={Page404} /&gt;
            &lt;Route exact path="/500" name="Page 500" component={Page500} /&gt;
            &lt;Route path="/" name="Home" component={DefaultLayout} /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>DefaultLayout.js</p>
  
  <pre><code> &lt;main className="main"&gt;
          &lt;AppBreadcrumb appRoutes={routes}/&gt;
          &lt;Container fluid&gt;
            &lt;Switch&gt;
              {routes.map((route, idx) =&gt; {
                  return route.component ? (&lt;Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props =&gt; (
                      &lt;route.component {...props} /&gt;
                    )} /&gt;)
                    : (null);
                },
              )}
              &lt;Redirect from="/" to="/dashboard"&gt;&lt;/Redirect&gt;
            &lt;/Switch&gt;
          &lt;/Container&gt;
  </code></pre>
  
  <p>One more thing to mention*, I am displaying these components/routes after a user is successfully logged in using Google OAuth. Here are my redirects: </p>
  
  <p>Login.js</p>
  
  <pre><code>if (postData) {
    PostData('api/v1/zuulusers', postData).then((result) =&gt; {
       let responseJson = result;
       localStorage.setItem("userData", JSON.stringify(responseJson));
       this.setState({redirect: true});
    });
    } else {}
  }
  render() {
  
    if (this.state.redirect || localStorage.getItem('userData')) {
      return (&lt;Redirect to={'/'}/&gt;)
  }
  </code></pre>