<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
I think its a bug not sure</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
I am using a function which creates a component which lazy loads the underlying component using React.lazy. My idea for creating this method was to prevent code duplication.  I have a child component which has some text, and its wrapped by a layout. I am trying to dynamically load the child component using suspense and react lazy</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { lazy, Suspense } from &quot;react&quot;;
import Layout from &quot;./components/layout&quot;;

function generateLazy(importCompnent) {
  const Content = lazy(importCompnent());
  return props =&gt; (
    &lt;Layout&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;Content {...props} /&gt;
      &lt;/Suspense&gt;
    &lt;/Layout&gt;
  );
}


// Usage in App.js
import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import createLazy from &quot;./createLazy&quot;;
import &quot;./styles.css&quot;;
const LazyComponent = createLazy(() =&gt; import(&quot;./components/text&quot;));

function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;LazyComponent /&gt;
    &lt;/div&gt;
  );
}
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s1">lazy</span><span class="pl-kos">,</span> <span class="pl-v">Suspense</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Layout</span> <span class="pl-k">from</span> <span class="pl-s">"./components/layout"</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">generateLazy</span><span class="pl-kos">(</span><span class="pl-s1">importCompnent</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-v">Content</span> <span class="pl-c1">=</span> <span class="pl-en">lazy</span><span class="pl-kos">(</span><span class="pl-s1">importCompnent</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Layout</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Suspense</span> <span class="pl-c1">fallback</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Loading...<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">Content</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Suspense</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Layout</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>


<span class="pl-c">// Usage in App.js</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">createLazy</span> <span class="pl-k">from</span> <span class="pl-s">"./createLazy"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s">"./styles.css"</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">LazyComponent</span> <span class="pl-c1">=</span> <span class="pl-en">createLazy</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"./components/text"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"App"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">LazyComponent</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">When i do the above i get an error saying  <strong>ctor is not a function</strong></p>
<h3 dir="auto">Stack trace</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="react-dom.development.js:11455 Uncaught TypeError: ctor is not a function
    at readLazyComponentType (react-dom.development.js:11455)
    at mountLazyComponent (react-dom.development.js:15476)
    at beginWork (react-dom.development.js:16247)
    at performUnitOfWork (react-dom.development.js:20285)
    at workLoop (react-dom.development.js:20326)
    at renderRoot (react-dom.development.js:20406)
    at performWorkOnRoot (react-dom.development.js:21363)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at scheduleRootUpdate (react-dom.development.js:21610)
    at updateContainerAtExpirationTime (react-dom.development.js:21636)
    at updateContainer (react-dom.development.js:21704)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:22017)
    at react-dom.development.js:22169
    at unbatchedUpdates (react-dom.development.js:21492)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:22165)
    at Object.render (react-dom.development.js:22240)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1"><pre class="notranslate"><code class="notranslate">react-dom.development.js:11455 Uncaught TypeError: ctor is not a function
    at readLazyComponentType (react-dom.development.js:11455)
    at mountLazyComponent (react-dom.development.js:15476)
    at beginWork (react-dom.development.js:16247)
    at performUnitOfWork (react-dom.development.js:20285)
    at workLoop (react-dom.development.js:20326)
    at renderRoot (react-dom.development.js:20406)
    at performWorkOnRoot (react-dom.development.js:21363)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at scheduleRootUpdate (react-dom.development.js:21610)
    at updateContainerAtExpirationTime (react-dom.development.js:21636)
    at updateContainer (react-dom.development.js:21704)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:22017)
    at react-dom.development.js:22169
    at unbatchedUpdates (react-dom.development.js:21492)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:22165)
    at Object.render (react-dom.development.js:22240)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
</code></pre></div>
<p dir="auto">It's likely i'm doing something wrong. I've also attached a working demo below</p>
<p dir="auto">**If the current behavior is a bug, please provide the steps to reproduce<br>
Working demo <a href="https://codesandbox.io/s/nn5ozqpz5j" rel="nofollow">https://codesandbox.io/s/nn5ozqpz5j</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Ideally this should lazy load the component, i.e the suspense fallback prop, should say loading first and then the text should be loaded in the parent</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
OS: OSX El capitan 10.11.16<br>
React Version: 16.8.6</p>
<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>Viewing a component within Storybook</li>
<li>Opened Profiler</li>
<li>Changed the target from Root to Story</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.2.0-a8b8ffb89</p>
<p dir="auto">Call stack: at n.value (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162685)<br>
at m (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332158)<br>
at sc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:332375)<br>
at fi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59263)<br>
at Hi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:66573)<br>
at lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104884)<br>
at kc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89467)<br>
at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89392)<br>
at pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:86341)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:45721</p>
<p dir="auto">Component stack: in sc<br>
in div<br>
in div<br>
in _o<br>
in Unknown<br>
in n<br>
in Unknown<br>
in div<br>
in div<br>
in zi<br>
in Ge<br>
in un<br>
in ba<br>
in Rc</p>