Can someone please explain why my lazy loaded ponent 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 Myp = lazy(() => import("./ponents/myComp"));
const Myp = lazy(() => {
  let x = new Promise(
    () => {
      import("./ponents/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">
            <Myp />
            <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 Myp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Myp;

Can someone please explain why my lazy loaded ponent 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 Myp = lazy(() => import("./ponents/myComp"));
const Myp = lazy(() => {
  let x = new Promise(
    () => {
      import("./ponents/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">
            <Myp />
            <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 Myp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Myp;

• javascript
• reactjs

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

1 Answer 1

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 ponent.

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 ponent with a default export.

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

const Myp = lazy(() => {
   return import("./ponents/myComp");
});

The dynamic import already returns a promise which resolves to a ponent 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>
    );
  }
}