title: Lazy loading/react-loadable in React-on-Rails
body: <p>I want to lazy load all of my top-level components to improve load time. I am using <a href="https://github.com/shakacode/react_on_rails" rel="noreferrer">react-on-rails</a> to integrate React and Ruby on Rails. To render the components, I have to register them like so in <code>registration.jsx</code>: </p>
  
  <pre><code>import ReactOnRails from 'react-on-rails';
  import Component1 from '../components/Component1';
  import Component2 from '../components/Component2';
  
  ReactOnRails.register({Component1, Component2});
  </code></pre>
  
  <p>I tried two methods:</p>
  
  <h2><strong>1. React.lazy:</strong></h2>
  
  <pre><code>import {lazy} from "react";
  const Component1 = lazy(() =&gt; import("../components/Component1"));
  </code></pre>
  
  <p>But the browser throws an error...</p>
  
  <pre><code>Uncaught Error: Module build failed: SyntaxError: 
  .../app/registration.jsx: Unexpected token, expected ";" (20:113)
  </code></pre>
  
  <p>It seems that I cannot use lazy load in this file. So I tried it in a sub component within Component1. But it still doesn't work.</p>
  
  <pre><code> const SubComponent = lazy(() =&gt; import("./SubComponent"));
  </code></pre>
  
  <p>This returns:</p>
  
  <pre><code>Uncaught ReferenceError: SubComponent is not defined
  </code></pre>
  
  <h2><strong>2. react-lodable:</strong></h2>
  
  <p><a href="https://github.com/jamiebuilds/react-loadable" rel="noreferrer">Official doc</a></p>
  
  <p>This seems to be recommended by <code>react-on-rails</code> (see below), but I got a different error saying react-on-rails cannot find such components.</p>
  
  <pre><code>import ReactOnRails from 'react-on-rails';
  import Loadable from "react-loadable";
  
  const loading = () =&gt; {
    return &lt;div&gt;Loading...&lt;/div&gt;;
  }
  
  const Component1 = Loadable({
    "loader": () =&gt; import('../components/Component1'),
    "loading": loading
  });
  
  import Component2 from '../components/Component2';
  
  ReactOnRails.register({Component1, Component2});
  </code></pre>
  
  <p>This is the error: </p>
  
  <pre><code>Uncaught ReferenceError: ReactOnRails encountered an error while rendering component: Component1.
  Original message: React is not defined
  </code></pre>
  
  <p>I tried to use it on a sub-component, too. But it just doesn't render it. </p>
  
  <pre><code>import Loadable from "react-loadable";
  
  const loading = () =&gt; {
    return &lt;div&gt;Loading...&lt;/div&gt;;
  }
  
  const SubComponent = Loadable({
    "loader": () =&gt; import("./SubComponent"),
    "loading": loading
  });
  
  class Component1 extends PureComponent {
    render () {
      return (
        &lt;SubComponent /&gt;
      )
  
    }
  }
  </code></pre>
  
  <p>But this only returns "loading..."</p>
  
  <h2><strong>Questions:</strong></h2>
  
  <p>The only good news is that Webpack is correctly splitting the bundles into smaller bundles based on components, so I think <code>react-loadable</code> works, but was not rendered correctly.</p>
  
  <p>Is it possible to lazy load components using <code>react-on-rails</code>? Or am I having a syntax error? It seems that <code>react-on-rails</code> controls how components are loaded.</p>
  
  <p>Another idea: maybe I should only do lazy loading on subcomponents. But I wonder if this will really help decreasing initial load time. Any thoughts?</p>