title: Received a promise that resolves to: undefined. Promise elements must resolve to a class or function
body: <p>I am trying to use lazy loading in react. I have imported lazy and Suspense components from react. The page doesn't show anything again. but the error I got is:</p>
  
  <blockquote>
    <p>Expected the result of a dynamic import() call. Instead received: [object Object].
    Element type is invalid. Received a promise that resolves to: undefined. Promise elements must resolve to a class or function.</p>
  </blockquote>
  
  <p>This  is SibaCard Component</p>
  
  <pre><code>export  class SibaCard extends React.Component&lt;ICardProps, ICardState&gt; {
  constructor(props: ICardProps) {
      super(props);
      this.state = {expanded: true};
  }
  
  expandChange = () =&gt; {
      this.setState((prevState: any) =&gt; ({ expanded: !prevState.expanded }));
  }
  
  style = {
      headerStyle: {
          borderBottom: "2px solid #258ECB",
          marginBottom: "1em",
          background: "linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.02))"
      },
      containerStyle: {
  
      }
  }
  render() {
      return (
          &lt;Card
              style={{ border: "1px solid rgba(0,0,0,0.1)",marginTop: "4.5em", boxShadow:"none" }}
              expanded={this.state.expanded}
              expandable={false}
              containerStyle={this.style.containerStyle}
              onExpandChange={this.expandChange.bind(this)}
          &gt;
              &lt;CardHeader
                      title={this.props.title}
                      subtitle={this.props.subTitle}
                      actAsExpander={false}
                      showExpandableButton={true}
                      style={this.style.headerStyle}
              /&gt;
              &lt;CardText expandable={true}&gt;
  
                  {this.props.children}
              &lt;/CardText&gt;
          &lt;/Card&gt; );
  }
  }
  </code></pre>
  
  <p>This is the component I am importing the Sibacard</p>
  
  <pre><code> import * as React from 'react';
   const lazy = (React as any).lazy;
   const Suspense  =(React as any).Suspense ;
   import { SingleSetup, ISingleSetupProps } from 
   "../../../Shared/Views/SingleSetup";
   import { LovDropDown } from "../../../Shared/Views/FormComponents";
   import { LoanRepaymentScheduleService } from 
   "../../Services/LoanRepaymentSchedule/LoanRepaymentScheduleService";
   import { RaisedButton } from "material-ui/RaisedButton";
   const SibaCard = lazy(() =&gt; import('../../../Shared/Views/SibaCard'));
  
      export class LoanPayOff extends SingleSetup&lt;ILoanRepaymentSchedule&gt;{
      loanrepaymentservice:LoanRepaymentScheduleService;
      employeeservice:EmployeeService;
      loantypeService:LoanTypeService;
      constructor(props: ISingleSetupProps&lt;ILoanRepaymentSchedule&gt;){
               super(props,{
                  id: 0,
                  employeeId: "",
                  principalAmt: 0,                    
               },[
                 grid definition
              ],[
  
              ],
              new LoanRepaymentScheduleService(),{
                  list: ""
  
              });
              this.formId = "loanrepayForm";
  
        }
  
        render() {      
          return (&lt;div&gt;            
              {this.actionMenu(false, true, false)}
  
              &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
              &lt;div className="" style={{ marginTop: "4.5em" }}&gt;
  
  
                  &lt;SibaCard
                      title="Employee Loan Pay Off Form"
                      subTitle="Enter  details below"&gt;
                      &lt;FormField&gt;
                          &lt;form id="loanrepayForm" className="row"&gt;
                          &lt;div className="col-sm-4"&gt;
                                          &lt;LovDropDown
                                              id="employeeId"
                                              title="Employee"
                                              label="Employee"
                                              name="employeeId"
                                              required={true}
                                              value={this.state.model.employeeId}
                                              onChange= 
                                    {this.fieldChange.bind(this)}
                                              service= 
                    {this.employeeservice.getLov.bind(this.employeeservice)}/&gt;
                                           &lt;Input 
                                                  label="Terms To Pay"  
                                                  name="list" 
                                                  type="number"  
  
                                                  value = {this.state.props.list} 
                                                  onChange= 
                               {this.propChange.bind(this)} /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-sm-4"&gt;
                                  &lt;LovDropDown
                                              label="Loan Type"
                                              title="Loan Type"
                                              id="loanTypeCode"
                                              name="loanTypeCode"                                          
                                              required={true}
                                              value={this.state.model.loanTypeCode}
                                              service={this.loantypeService.getLov.bind(this.loantypeService)}
                                              onChange={this.fieldChange.bind(this)}
  
                                          /&gt;
                                  &lt;/div&gt;
  
                                  &lt;div className="col-sm-4"&gt;
  
                                  &lt;RaisedButton
                                      icon={&lt;FileFileDownload className="ico" color="#7ED321"/&gt;}
                                      backgroundColor="rgba(0,0,0,0.3)"
                                      style={{ float: "none",paddingLeft:"4px",paddingRight:"4px" }}
                                      label="Search"
                                      onClick={this.LoadDetails.bind(this)}
                                     /&gt;
                                      &lt;RaisedButton
                                      icon={&lt;FileFileDownload className="ico" color="#7ED321"/&gt;}
                                      backgroundColor="rgba(0,0,0,0.3)"
                                      style={{ float: "none",paddingLeft:"4px",paddingRight:"4px" }}
                                      label="Pay Off"
                                      onClick={this.PayOff.bind(this)}
                                     /&gt;
  
                                 &lt;/div&gt;
  
                          &lt;/form&gt;
                      &lt;/FormField&gt;
  
                      &lt;div className=""&gt;
  
                          {this.MultiSelectGrid()}
                      &lt;/div&gt;
                  &lt;/SibaCard&gt;
  
              &lt;/div&gt;
              {console.log(this.state.selectedRow.length)}
              {console.log(this.state)}
              {this.viewConstants()}
              &lt;/Suspense&gt;
  
          &lt;/div&gt;);
      }  
     }
  </code></pre>
  
  <p>Can someone tell me what I am doing wrong?</p>