'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

[mahtabhnp]

Hi,
I’m interested in working on this issue. Could you please assign it to me? This will be my first contribution, and I’m excited to get started. Let me know if there are any specific guidelines or steps I should follow.

Thank you!
@mohapakram