Type error: 'SimpleBar' cannot be used as a JSX component.

I am getting an error during the NextJS build process like in below:

Type error: 'SimpleBar' cannot be used as a JSX component.

I am using ^2.3.6 as simplebar-react version.

How can I fix this?

[OchreFox]

Here’s a workaround for people looking for a solution: I installed react-beautiful-dnd and also got the same error:

'SimpleBar' cannot be used as a JSX component.
  Its instance type 'SimpleBar' 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/react-beautiful-dnd/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

I managed to track the error and this dependency introduced types for react in v18. For context, I’m using Typescript with React 17 since I have some dependencies that are not fully compatible with v18. This is the command output:

npm ls @types/react
ROOT-PROJECT@1.0.0 <PROJECT_PATH>
├─┬ @types/react-beautiful-dnd@13.1.2
│ └── @types/react@18.0.15
├─┬ @types/react-dom@17.0.17 extraneous
│ └── @types/react@17.0.45 extraneous
├─┬ @types/react-window@1.8.5

Now the only thing to be done is to override this dependency when installing. In npm is done by forcing the dependency version in the overrides section in the package.json file. I’m using yarn v1 so the directive is called resolutions:

 "resolutions": {
    "@types/react": "17.0.39"
  },

After modifying the package.json file and running yarn install, I restarted VS Code and the error is now gone.

[GitHub-Cool]

Here’s a workaround for people looking for a solution: I installed react-beautiful-dnd and also got the same error:

'SimpleBar' cannot be used as a JSX component.
  Its instance type 'SimpleBar' 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/react-beautiful-dnd/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

I managed to track the error and this dependency introduced types for react in v18. For context, I’m using Typescript with React 17 since I have some dependencies that are not fully compatible with v18. This is the command output:

npm ls @types/react
ROOT-PROJECT@1.0.0 <PROJECT_PATH>
├─┬ @types/react-beautiful-dnd@13.1.2
│ └── @types/react@18.0.15
├─┬ @types/react-dom@17.0.17 extraneous
│ └── @types/react@17.0.45 extraneous
├─┬ @types/react-window@1.8.5

Now the only thing to be done is to override this dependency when installing. In npm is done by forcing the dependency version in the overrides section in the package.json file. I’m using yarn v1 so the directive is called resolutions:

 "resolutions": {
    "@types/react": "17.0.39"
  },

After modifying the package.json file and running yarn install, I restarted VS Code and the error is now gone.

It worked