'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