NPM package cannot be used as a JSX Component – Type errors

by

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.

More Related Contents:

  1. TypeScript 2: custom typings for untyped npm module
  2. typings vs @types NPM scope
  3. How do I decide whether @types/* goes into `dependencies` or `devDependencies`?
  4. Import class in definition file (*d.ts)
  5. Types for function that applys name of function and arguments
  6. Is there a way to define type for array with unique items in typescript?
  7. Keyof inferring string | number when key is only a string
  8. How to configure custom global interfaces (.d.ts files) for TypeScript?
  9. Exclude/overwrite npm-provided typings
  10. Typescript 2.0. “types” field in tsconfig.json
  11. TypeScript typings in npm @types org packages
  12. Typescript does not copy d.ts files to build
  13. Extend (Update) third-party old type declaration interface with new one
  14. Mapping tuple-typed value to different tuple-typed value without casts
  15. ts-node ignores d.ts files while tsc successfully compiles the project
  16. ‘tsc command not found’ in compiling typescript
  17. How should I use @types with TypeScript 2
  18. Global types in typescript
  19. how to remove properties via mapped type in TypeScript
  20. Typescript Unions based on property inside nested object
  21. How to update TypeScript to latest version with npm?
  22. Extending global types (e.g. “Window”) inside a typescript module
  23. Types from both keys and values of object in Typescript
  24. Narrowing a return type from a generic, discriminated union in TypeScript
  25. String Union to string Array
  26. About “*.d.ts” in TypeScript
  27. In TypeScript, how to get the keys of an object type whose values are of a given type?
  28. Is this behavior of “𝚊𝚗𝚢” a TypeScript Type System Bug?
  29. Empty interface allow any object?
  30. Typescript assert-like type guard

Leave a Comment