TypeScript with React Lazy getting promise error

Question

I am using react with typescript.I have used a higher order component to check whether the user is authenticated or not. After adding the hoc i am getting the error in routes as below

 /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts
TypeScript error in /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts(7,36):
Type 'Promise<typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Type 'typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")' is not assignable to type '{ default: ComponentType<any>; }'.
    Types of property 'default' are incompatible.
      Type '{}' is not assignable to type 'ComponentType<any>'.
        Type '{}' is not assignable to type 'FunctionComponent<any>'.
          Type '{}' provides no match for the signature '(props: any, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.  TS2322

     5 | export const SignIn = React.lazy(() => import('pages/Public/SignIn'));
     6 | 
  >  7 | const Dashboard = React.lazy(() => import('pages/Secure/Dashboard'));
       |                                    ^
     8 | 
     9 | const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];
    10 |

Routes.ts

   export const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));

const Dashboard = React.lazy(() => import('../pages/Secure/Dashboard'));

const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];

export default routes;

HOC:

interface HocProps {
  authUser: AuthToken;
  history?: any;
}


const withAuthentication = () => (Component: any) => {
  class WithAuthentication extends React.Component<HocProps, {}> {
    componentDidMount() {
      if (isEmpty(this.props.authUser)) {
        this.props.history.push('/signin');
      }
    }

    render() {      
      return this.props.authUser ? <Component {...this.props} /> : null;
    }
  }

  function mapStateToProps() {
    return {
      authUser: getAuthHeaders()
    };
  }

  return compose(
    withRouter,
    connect(mapStateToProps)
  )(WithAuthentication);
};

export default withAuthentication;

Dashboard.tsx:

const Dashboard = () => <div>Dashboard</div>;

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard);

Since i am new to typescript i couldn't able to figure out what error it is

Answer 1

I can only assume this error is caused because the default export of Dashboard is of type {} (returned from the compose function) which doesn't match the React component signature.

Try changing the export line in Dashboard to:

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard) as React.ComponentType<any>;

This will forcefully cast the export to the correct type, allowing React.lazy to work.