Component from NPM module cannot be used as a JSX component

Why does this issue occur and how can we solve it? This is what the type error looks like:

'Component'(Name here) cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type

I encountered this problem recently with 2 modules so far: react-tooltip and react-dates. Note: this issue only occurs if you are using TypeScript with React, otherwise an error wouldn’t be thrown because React allows an array to be returned from a component render function, but TypeScript does not.

The Logic Behind the Problem

So this issue appeared for me after the latest version(18) of @types/react was released and the reason it happens is that many react libraries have a dependency on @types/react but they also have it set as "*" , which means that if you are installing modules in a project, let’s say by running npm install or creating a build for your pipeline, these dependencies will take the latest version which is now 18 and your code might break if they are not compatible with the latest version, versus when it was set to 17 by default it used to work.

The reason behind the issue was hard to find because it might seem like nothing in the package.json file has changed so shouldn’t be affecting the npm modules that used to work before but the culprit is the different version of @types/react being installed because of packages specifying the version * as a dependency.

The Resolution

So until the packages get updated, we can solve the problem by forcing the older version of @types/react. If you are using yarn you can just add this to your package.json:

"resolutions": {
  "@types/react": "^17.0.38"
}

But if you are using npm, you would also need npm-force-resolutions for resolutions section to work in package.json and also adding this script to your scripts section in the same file:

"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

The issue has been reported on react’s GitHub but doesn’t seem like collaborators would take effort into solving this issue since it’s mainly coming from other dependencies and how they use types, but if interested you can read more about it here.

If you want to learn more about TypeScript, check out my channel, where I build projects in TS and React:)