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?

CodePudding user response：

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

CodePudding user response：

I have the same problem :(

All dependencies in the project aren't auto-updating and are hardcoded (without ^)

/code/src/components/primitives/p-input/p-input.tsx
TypeScript error in /code/src/components/primitives/p-input/p-input.tsx(49,12):
'NumberFormat' cannot be used as a JSX component.
  Its instance type 'NumberFormat<unknown>' 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("/code/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props  TS2786
    47 |         rules={props.rules}
    48 |         render={({field}) => (
  > 49 |           <NumberFormat {...field} {...props} className={inputRoot({slotRight, size})} thousandSeparator={true} />
       |            ^
    50 |         )}
    51 |       />
    52 |     ) : (
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn &&     yarn build:dev' returned a non-zero code: 1
Cleaning up project directory and file based variables
00:01
ERROR: Job failed: exit code 1

CodePudding user response：

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.