React: ctor is not a function when using React.lazy

[nitish24p]

Do you want to request a feature or report a bug?
I think its a bug not sure

What is the current behavior?
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

import React, { lazy, Suspense } from "react";
import Layout from "./components/layout";

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


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

function App() {
  return (
    <div className="App">
      <LazyComponent />
    </div>
  );
}

When i do the above i get an error saying ctor is not a function

Stack trace

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

It's likely i'm doing something wrong. I've also attached a working demo below

**If the current behavior is a bug, please provide the steps to reproduce
Working demo https://codesandbox.io/s/nn5ozqpz5j

What is the expected behavior?
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

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
OS: OSX El capitan 10.11.16
React Version: 16.8.6

[malerba118]

It looks like the problem is that you're invoking importCompnent

const Content = lazy(importCompnent());

It shouldn't be invoked because lazy expects a function

const Content = lazy(importCompnent);

[nitish24p]

Arrgh!!! sorry!!! Thanks @malerba118