Inferno-router Switch error: Its element type 'InfernoNode' is not a valid JSX element.

[Dessalines]

I have this issue when trying to use IRouteProps.component.

Code:

<Switch>
{routes.map(({ path, exact, component: C, ...rest }) => (
  <Route 
      key={path} 
      path={path} 
      exact={exact}
      render={props => <C {...props} {...rest} />}  // Error here
    />
  ))}
  <Route render={props => <NoMatch {...props} />} />
</Switch>

Error:

src/shared/components/app/app.tsx:52:39 - error TS2786: 'C' cannot be used as a JSX component.                             
Its element type 'InfernoNode' is not a valid JSX element.                                                                 
Type 'boolean' is not assignable to type 'Element | ElementClass'.                                              
                                                                                                                              
 52                     render={props => <C {...props} {...rest} />}                                                                                                                                                                                                                                                                                                                                                                                                   Found 1 error in src/shared/components/app/app.tsx:52

Inferno 8.0.1

[Sampo Kivistö]

Can you show how "routes" variable is constructed so I could reproduce the same issue. I have found some problems with inferno-router typings which I'm trying to fix, but I'm not sure if its the same issue you are having

[Sampo Kivistö]

Did you also update inferno-router 8.0.1

[Dessalines]

Yep its also inferno-router 8.0.1

interface IRoutePropsWithFetch extends IRouteProps {
  fetchInitialData?(req: InitialFetchRequest): Promise<any>[];
}

export const routes: IRoutePropsWithFetch[] = [
  {
    path: `/`,
    exact: true,
    component: Home,
    fetchInitialData: req => Home.fetchInitialData(req),
  },...

I've found a hack, that if I use a separate component variable with type: componentC: IComponentConstructor<any>;, it compiles and runs.

[Sampo Kivistö]

I think this issue occurs because IRouteProps declares component as optional parameter, because either component or
render can be used. The problem appears when using IRouteProps Component property to render the component because it might be undefined. using it with ! operator might fix the issue you are having. To tell the typescript compiler that it will never be undefined.

I have released a new version 8.0.2 could you try that out to see if it fixes the issue you were having

[Dessalines]

8.0.2 fixed it, thanks!