Type 'React.ReactNode' is not assignable to type 'import(".../@types/react-transition-group/node_modules/@types/react/index").ReactNode'

Question

I've worked with React project, integrated with Circle CI and after some minor changes, it started to fail all builds with

Its instance type 'ReactApexChart' 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/circleci/app.mxney-board-v2.test/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

79       <Chart options={fillOptions} series={graphData} height={chartHeight} />
          ~~~~~

src/index.tsx:20:8 - error TS2786: 'App' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Omit<Subtract<unknown, WithTranslationProps>, keyof WithTranslation<N>> & WithTranslationProps, any, any> | null' is not a valid JSX element.
    Type 'Component<Omit<Subtract<unknown, WithTranslationProps>, keyof WithTranslation<N>> & WithTranslationProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Omit<Subtract<unknown, WithTranslationProps>, keyof WithTranslation<N>> & WithTranslationProps, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/home/circleci/app.mxney-board-v2.test/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

20       <App />
          ~~~

Locally, project is running without problems.

I've tried:

• update @types and libraries
• remove react-apexchart library
• remove react-transition library
• remove yarn.lock an node_modules and reinstall - that breaks everything and I get this errors locally

Answer 1

Does your @types/react match the version of react you have installed?