'NumberFormat' cannot be used as a JSX component

[andreydro]

Describe the issue and the actual behavior

Without changing the version and refactoring code this error starts to appear and breaks the build of the project

Describe the expected behavior

'NumberFormat' cannot be used as a JSX component.
  Its instance type 'NumberFormat' 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("/Users/dro/work/rubyroid/italbazar/frontend/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

Provide steps to reproduce this issue

1. yarn add [email protected]
2. import NumberFormat from 'react-number-format'

   <NumberFormat
        displayType="text"
        value={totalPrice}
        suffix={t('common.ruble_short_space')}
        thousandSeparator=" "
   />

[lucivaldo]

I'm also having the same problem.

webpack 5.72.0 compiled with 1 warning in 1251 ms
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/pages/NovaSolicitacao/index.tsx:565:26
TS2786: 'NumberFormat' cannot be used as a JSX component.
  Its instance type 'NumberFormat<any>' 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("/home/lucivaldo/dev/sid-frontend/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
    563 |                       }}
    564 |                       render={({ field }) => (
  > 565 |                         <NumberFormat
        |                          ^^^^^^^^^^^^
    566 |                           {...field}
    567 |                           format="###.###.###-##"
    568 |                           customInput={Input}

My package.json:

    "react-hook-form": "^7.29.0",
    "react-icons": "^4.3.1",
    "react-number-format": "^4.9.1",
    "react-query": "^3.34.19",
    "react-quill": "^2.0.0-beta.4",

[lucaswx2]

Any news about that? I'm facing the same Issue

[bjrice88]

This is happening because the types for react@18 were pushed out that made some changes to children and ReactNode that you can see here. https://solverfox.dev/writing/no-implicit-children/

The problem seems to be that a whole lot of 3rd party devs just include "@types/react": "*" so it updated and broke tons of 3rd party dependencies.

I fixed this in my project (for now) by adding this to my packages.json file for yarn.

"resolutions": {
    "@types/react": "17.0.43"
  }

[lucaswx2]

This is happening because the types for react@18 were pushed out that made some changes to children and ReactNode that you can see here. https://solverfox.dev/writing/no-implicit-children/

The problem seems to be that a whole lot of 3rd party devs just include "@types/react": "*" so it updated and broke tons of 3rd party dependencies.

I fixed this in my project (for now) by adding this to my packages.json file for yarn.

"resolutions": {
    "@types/react": "17.0.43"
  }

That worked for me

[GreenAsJade]

Is there a similar solution for npm?

[robinmetral]

Is there a similar solution for npm?

@GreenAsJade yes: overrides

[liviaromani]

I just created this module.d.ts file inside root project

declare module "react-number-format";

That worked for me.

[bamonde]

I just created this module.d.ts file inside root project

declare module "react-number-format";

That worked for me.

Hi! Did you reference this file in another one?

[Mayamii]

it worked for me too, but still i hope that the issue will be resolved sooner or later?

[Korin92]

same problem with react18