"@types/react-transition-group" depends on "@types/[email protected]", so it doesn't work with React 17

[Hubro]

What is the current behavior?

I'm using Next.js with React 17 and Material UI. I have installed @types/[email protected] manually. However, when I install @mui/material, it pulls in @types/react-transition-group, which in turn pulls in @types/[email protected]. This doesn't match my React version, and it breaks my build at the type checking stage:

./src/components/ProfileBadge.tsx:95:12
Type error: 'Trans' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<TransProps, any, any> | null' is not a valid JSX element.
    Type 'Component<TransProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<TransProps, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/home/tomas/Dropbox/projects/avesta/fjelldata/client/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

  93 |         >
  94 |           <ExitToAppIcon sx={{ ml: "-10px", mr: "10px" }} />{" "}
> 95 |           <Trans>Log out</Trans>
     |            ^
  96 |         </MenuItem>
  97 |       </Menu>
  98 |     </>
info  - Checking validity of types .npm ERR! code ELIFECYCLE

What is the expected behavior?

I have no idea :confused: I have no idea which package to blame here, but I know @types/[email protected] should not be installed.

[Twathik]

+1

[ulrich06]

+1

[cq-ubaid-khan]

+1

[cq-ubaid-khan]

Thanks for opening this issue, I was also unable to find where to ask about this issue since it could be related to react, react-router, and material 👍

[zadinvit]

If you have older version of npm, just try 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 fix this problem. Try check this stackoverflow thread - https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors/71838606#71838606.

[cq-ubaid-khan]

If you have older version of npm, just try 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 fix this problem. Try check this stackoverflow thread - https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors/71838606#71838606.

I've tried to update but then I get other errors when running npm i, It seems we've to update either the node version to LTS or update the package.json deps versions. Whatever the case I don't think this is a viable solution.

[Hubro]

Checking the Stackoverflow link above, it seems like the solution would be to install NPM v8 or newer, then add to the package.json:

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

I'll try it when I have time.

[makyfj]

Using yarn v1: adding

"resolution": { "@types/react": "17.0.2" -> this is my version }

I deleted package-lock.json and then yarn add and yarn build and it works perfectly now.

[ChrisLincoln]

I couldn't get "right from the examples, converted to TS" previously-compiling code for <TransitionGroup> passed typescript after upgrading from React 17 to React 18 today. Based on the hint given by @makyfj , I took a peek my yarn.lock file and foudnd:

I changed it to

(by hand. Probably should have found out the yarn cli magic I needed). But it builds now.