'ReactLoading' cannot be used as a JSX component.

[mohapakram]

Just importing ReactLoading like this:

import ReactLoading from 'react-loading';

Gives me this error:

ERROR in src/components/newDesign/pages/login/LoginPage.tsx:93:38
TS2786: 'ReactLoading' cannot be used as a JSX component.
  Its instance type 'Loading' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/PC/OneDrive/Desktop/iplant/frontend/iplant/node_modules/@types/react-table/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
    91 |                                         <InputItem fullWidth type='password' {...register("password")} />
    92 |                                     </FormItemContainer>
  > 93 |                                     <ReactLoading type='bubbles' color="white" />
       |                                      ^^^^^^^^^^^^
    94 |                                     <FormButton type="submit" disabled={isSubmitting}>
    95 |                                         {isSubmitting ? 'loading' : 'Login'}
    96 |                                     </FormButton>

[bhavyagor12]

Hey is there a fix available for this?

[bhavyagor12]

Got around this issue by doing this --
in the tsconfig.json
{
"compilerOptions": {
"jsx":"react",
"strict": true,
"paths": {
"react": [ "./node_modules/@types/react" ]
}
}
}

stack overflow link