Lazy loading in react - the component is not loading

Question

Can someone please explain why my lazy loaded component never loads?

All is see is the message loading... on the screen...and no errors.

Below is my code:

import React, { Component, lazy, Suspense } from "react";
import "./App.css";
//const Mycomp = lazy(() => import("./components/myComp"));
const Mycomp = lazy(() => {
  let x = new Promise(
    () => {
      import("./components/myComp");
    },
    e => {
      console.log(e);
    }
  );
  return x;
});

class App extends Component {
  sayHi = () => {
    console.log("supa");
  };

  render() {
    return (
      <Suspense fallback={<div> loading...</div>}>
        <div className="App">
          <header className="App-header">
            <Mycomp />
            <input type="button" value="sayHi" onClick={this.sayHi} />
          </header>
        </div>
      </Suspense>
    );
  }
}

export default App;

This is simply for learning purpose.. so please be kind.. I'm not very familiar with react in general....

below is the code for myComp.jsx:

import React, { Component } from "react";

class Mycomp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Mycomp;

does the component you are trying to import have a default export? — Chaim Friedman
– Chaim Friedman, Commented Dec 20, 2018 at 1:40
@ChaimFriedman yes. i aded the code for Mycomp component there.. — psj01
– psj01, Commented Dec 20, 2018 at 1:43
Your importing myComp component while your component name is Mycomp. — loQ
– loQ, Commented Dec 20, 2018 at 1:50

Chaim Friedman · Accepted Answer · 2018-12-20 02:06:05Z

6

from the react docs.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

Now its subtle, but I think in your case you are returning your own newly created promise which you have assigned to x. You did not however specify what this promise resolves to. React needs you to return a promise which resolves to a component with a default export.

I think you can make one small change to your code to get it working.

const Mycomp = lazy(() => {
   return import("./components/myComp");
});

The dynamic import already returns a promise which resolves to a component with a default export, so I think you wrapping it in your own promise which you are returning is throwing it off.

Here is the example from the react docs.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

Here is some example code showing how do add a timeout.

const OtherComponent = React.lazy(() => {
  const x = new Promise((resolve) => {
    setTimeout(() => {
      return resolve(import("./Child"))
    }, 1500)
  })
  return x;
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
      </div>
    );
  }
}

edited Dec 20, 2018 at 2:06

answered Dec 20, 2018 at 1:49

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

psj01 Over a year ago

yes that will work.. but basically what i was trying to do was to add a setTimeout function so i can load the component only after like 5 seconds ... is that possible?

Chaim Friedman Over a year ago

Ive never tried that. My guess is that so long as you satisfy the requirements of lazy function, you can do anything. That being said I am curious to try that myself.

psj01 Over a year ago

yeah.. i was just playing around with it... but i can't get it to work.. and no error messages to go on.. so ... kinda stuck.. :(

Chaim Friedman Over a year ago

Booting up a sample project now to try. Can I play with this api in CRA?

psj01 Over a year ago

yup thats what i did.

|

Collectives™ on Stack Overflow

Lazy loading in react - the component is not loading

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related