Received a promise that resolves to: undefined. Promise elements must resolve to a class or function

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:

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.

This is SibaCard Component

export  class SibaCard extends React.Component<ICardProps, ICardState> {
constructor(props: ICardProps) {
    super(props);
    this.state = {expanded: true};
}

expandChange = () => {
    this.setState((prevState: any) => ({ 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 (
        <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)}
        >
            <CardHeader
                    title={this.props.title}
                    subtitle={this.props.subTitle}
                    actAsExpander={false}
                    showExpandableButton={true}
                    style={this.style.headerStyle}
            />
            <CardText expandable={true}>

                {this.props.children}
            </CardText>
        </Card> );
}
}

This is the component I am importing the Sibacard

 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(() => import('../../../Shared/Views/SibaCard'));

    export class LoanPayOff extends SingleSetup<ILoanRepaymentSchedule>{
    loanrepaymentservice:LoanRepaymentScheduleService;
    employeeservice:EmployeeService;
    loantypeService:LoanTypeService;
    constructor(props: ISingleSetupProps<ILoanRepaymentSchedule>){
             super(props,{
                id: 0,
                employeeId: "",
                principalAmt: 0,                    
             },[
               grid definition
            ],[

            ],
            new LoanRepaymentScheduleService(),{
                list: ""

            });
            this.formId = "loanrepayForm";

      }

      render() {      
        return (<div>            
            {this.actionMenu(false, true, false)}

            <Suspense fallback={<div>Loading...</div>}>
            <div className="" style={{ marginTop: "4.5em" }}>


                <SibaCard
                    title="Employee Loan Pay Off Form"
                    subTitle="Enter  details below">
                    <FormField>
                        <form id="loanrepayForm" className="row">
                        <div className="col-sm-4">
                                        <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)}/>
                                         <Input 
                                                label="Terms To Pay"  
                                                name="list" 
                                                type="number"  

                                                value = {this.state.props.list} 
                                                onChange= 
                             {this.propChange.bind(this)} />
                                </div>
                                <div className="col-sm-4">
                                <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)}

                                        />
                                </div>

                                <div className="col-sm-4">

                                <RaisedButton
                                    icon={<FileFileDownload className="ico" color="#7ED321"/>}
                                    backgroundColor="rgba(0,0,0,0.3)"
                                    style={{ float: "none",paddingLeft:"4px",paddingRight:"4px" }}
                                    label="Search"
                                    onClick={this.LoadDetails.bind(this)}
                                   />
                                    <RaisedButton
                                    icon={<FileFileDownload className="ico" color="#7ED321"/>}
                                    backgroundColor="rgba(0,0,0,0.3)"
                                    style={{ float: "none",paddingLeft:"4px",paddingRight:"4px" }}
                                    label="Pay Off"
                                    onClick={this.PayOff.bind(this)}
                                   />

                               </div>

                        </form>
                    </FormField>

                    <div className="">

                        {this.MultiSelectGrid()}
                    </div>
                </SibaCard>

            </div>
            {console.log(this.state.selectedRow.length)}
            {console.log(this.state)}
            {this.viewConstants()}
            </Suspense>

        </div>);
    }  
   }

Can someone tell me what I am doing wrong?

Answer

The docs state that:

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.

If you change your export of the SibaCard component from a named export to a default export it should work as expected.

export default class SibaCard extends React.Component<ICardProps, ICardState> {
  // ...
}