'NPM package cannot be used as a JSX Component - Type errors

Ive been getting these strange type errors on my typescript project for certain packages. Ex:

'TimeAgo' cannot be used as a JSX component.
  Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{}>>' 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/user/app/node_modules/@types/react-bootstrap-table-next/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

I don't get these type errors on my local windows machine but they keep occurring in my linux virtual machine. I've deleted the project many times, cloned my repo and installed packages again in different versions of node and I still get the same type errors.

Checked node 12.18.3, 16.13.1

Here is some quick package json info:

"react-timeago": "^6.2.1",
"react-custom-scrollbars": "^4.2.1",
"react-custom-scrollbars-2": "^4.4.0",
"react": "^17.0.2",
"next": "^12.1.1",
"@types/react-custom-scrollbars": "^4.0.10",
"@types/react-timeago": "^4.1.3",
"@types/react": "^17.0.44",
"typescript": "^4.3.5"
"@types/node": "^14.18.12",

This happens on basic custom components:

MyTst.tsx
import TimeAgo from "react-timeago";

const Mytst = () => {
  return (
    <div>
      <TimeAgo date={"02/02/2022"} />
    </div>
  );
};

export default Mytst;

I get this error for react-custom-scrollbars-2 as well. There seems to be an issue with matching the types correctly between the library which contains the component and the @types files associated with them. Anyone have any ideas on how to resolve these type errors?

typescriptnpmtypescript-typings


Solution 1:[1]

Had the same issue. Just add this

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2"
},

to package.json file and run yarn command.

UPD: Just a bit detailed answer:

@types/react-dom has its own dependencies and one of them is @types/react with a version set to '*' - a major release, that now, probably, refers to 18.

Even if you specify some strict versions in your package.json (without ^) parent package might install its own duplicates of packages that you are already using for its own purposes.

By using resolutions we are specifying strict restrictions for dependencies of dependencies.

Solution 2:[2]

You will need to fix the version for @types/react package because many react libraries have dependency set as @types/react : "*", which will take the latest version of the package. (I suppose they just released version 18)

To do that you can add this in your package.json

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

It will just work fine with yarn, but if you are using npm, then you will also need to add this in "scripts" section of your package.json

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

This will simply use npm-force-resolutions package to fix versions from resolutions.

And then after doing npm install, your app should work just fine.

Solution 3:[3]

I also had the same issue, so I updated npm version ^6.0.0 -> 8.0.0 and it was resolved.

Check npm version.

Solution 4:[4]

Had this with Styled Components. Resolutions didn't work for me so here's another solution:

Brute force type casting:

const ThemeProviderFixed = ThemeProvider as unknown as React.FC<PropsWithChildren<{ theme: string }>>;

Solution 5:[5]

I known issued today

rm -rf node_modules
rm -rf yarn.lock
npm install

just used npm install sovled problem but I don't know what happend

Solution 6:[6]

If you have older version of npm, just update npm to version > 8.0.0. It worked for me.

I had npm version 6.x.x. I tried many solutions, but update npm to new version fix this problem easy.

Solution 7:[7]

for npm!

check which version of node and npm you have installed. if you update to 8.x, npm provides you the same thing as resolution does for yarn but its"overrides". update your package like this:

"overrides": {
  "@types/react": "17.x.x",
  "@types/react-dom": "17.x.x"
}

my npm and node versions were up to date on local instance, but not on git ci. After the update, it was working without to override the versions for react and react-dom.

Solution 8:[8]

I came across this issue recently when upgrading to React 18 and forgetting to upgrade my corresponding types in devDependencies.

What worked for me was upgrading React types to match in the package.json file as shown

{
    ...
    "dependencies": {
        ...
        "react": "^18.1.0",
    },
    "devDependencies": {
        ...
        "@types/react": "^18.0.8",
    }
}

Solution 9:[9]

Ok. I ended up fixing this problem but to warn you in advance, there wasn't a magical way to do this.

I basically uninstalled all the @types I think were the offenders. You can find this out by reading your error window. The key was this message in my original error above.

Type 'React.ReactNode' is not assignable to type 'import("/home/user/app/node_modules/@types/react-bootstrap-table-next/node_modules/@types/react/index").ReactNode'.

If you see where the node module types are pointing to and its not associated with your library, then remove it. In my case, my issue was the package TimeAgo and the type error was showing that types were assigned to a different package. So I uninstalled it and kept cycling through the errors until it went away.

Then I use npm run build to do type checks and instruct me which types I had to reinstall. (There is probably a better way to do this part but it worked for me even though it was tedious.)

This issue seems to happen when you have a ton of different libraries and their types that have similar dependencies and overtime if they aren't needed, don't do what I do and just keep them piled up in your package.json.

So if you think any type can have conflicts with your library, uninstall and see if the error goes away, and then reinstall if other type errors appear that say the dev type package is missing. I also had some @type packages as dependencies instead of devDependencies which I removed and moved back into dev. Don't know if that played a part.

When in doubt, remove all applicable types and see if the issue is resolved.

Solution 10:[10]

Unfortunately in my case I can't use the most voted answer since I need @types18 since I need to use the latest hooks from react@18 like useId and I can't import them using @types/react@17 since they have no exported members for those hooks. I was able to use latest types fixing the broken typed deps, thanks to @Chris Web' s answer. For example for the Redux Provider:

// temp fix due to @types/react@18
const Provider = _Provider as unknown as React.FC<{
  children?: JSX.Element | string;
  store: any;
}>;

The store: any is not ideal, but it's just a temp fix.

Solution 11:[11]

I posted a different answer but it was basically a duplicate answer so I'll provide another approach.

If you're using yarn, you can run yarn dedupe and it will make the necessary changes to your yarn.lock file. It will consolidate any references to the same package to resolve to the correct version. As you can see from here, the - lines are what were removed and the + line is modified and saved:

-"@types/react@npm:*, @types/react@npm:>=15, @types/react@npm:>=16.9.0":
-  version: 17.0.43
-  resolution: "@types/react@npm:17.0.43"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 981b0993f5b3ea9d3488b8cc883201e8ae47ba7732929f788f450a79fd72829e658080d5084e67caa008e58d989b0abc1d5f36ff0a1cda09315ea3a3c0c9dc11
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^18.0.0":
+"@types/react@npm:*, @types/react@npm:>=15, @types/react@npm:>=16.9.0, @types/react@npm:^18.0.0":

"@types/react@npm:*, @types/react@npm:>=15, @types/react@npm:>=16.9.0"

was consolidated into

"@types/react@npm:*, @types/react@npm:>=15, @types/react@npm:>=16.9.0, @types/react@npm:^18.0.0"

Related Questions