'ScrollContainer' cannot be used as a JSX component.

[Alvaro Fernandez]

I theScrollContainer component fails with

Its instance type 'ScrollContainer' 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("../node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

I have a simple implementation

import React from 'react'
import ScrollContainer from 'react-indiana-drag-scroll'

export const Foo = () => {
    return (
      <ScrollContainer
         className='scroll-container'
         horizontal={true}
         vertical={true}
      >
        <h1>Test</h1>
    </ScrollContainer>
   )
})

[Norserium]

@alvaro-escalante, did you solve the issue?

[Alvaro Fernandez]

@Norserium, yes, I had to implement these resolutions on package.json https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors

[Norserium]

@alvaro-escalante, thanks for the information. It could be helpful for other fellows.

[Sera]

Hi! I'm still having this issue. Do you know if there's anything else I can do?
I try the solution of adding the "resolutions" objects

[Norserium]

@MatiSera, what's version of react and react-indiana-drag-scroll do you use?

[Sera]

@Norserium "react": "18.2" "react-indiana-drag-scroll" :"^2.2.0"

I solved the issue, declaring the module on a declaration.d.ts file
eg:

declare module 'react-indiana-drag-scroll' {
  const scrollContainer: FC
  export = ScrollContainer
}