Definitelytyped: [React] Several types dependent on react are broken for anyone using react 15

Created on 27 Sep 2017  路  4Comments  路  Source: DefinitelyTyped/DefinitelyTyped

  • [x] I tried using the @types/xxxx package and had problems.
  • [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
  • [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
  • [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.

Hi @tkrotoff

Problem:

After React 16 update many related typings just stopped working for anyone still on react 15. A similar error was reported before in https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18708 but never resolved and later closed because the person creating the issue updated to react 16 and stopped having the issue.

This are the typings affected that I'm aware of:

  • @types/react-dom
  • @types/rc-slider
  • @types/react-addons-update
  • @types/react-addons-shallow-compare
  • @types/react-router

My investigation showed that types for @types/react-select and @types/react-boostrap work fine because although they also reference @types/react to the latest version they pick up the version installed in the project and don't come with their own node_modules folder that will try to use the latest version for react.

Is there anything I can do in a PR to make these libraries work as react-select and react-bootstrap? I digging out the type definitions in here I can't figure out the difference, when do the type modules come with node_modules and when do they not? Can someone assist me in creating a PR to fix this ASAP?

This is a total blocker for anyone still on React 15

Most helpful comment

It seems my issue here was not so much an problem with how the type definitions are written, but seems to be an issue with something being stuck in my yarn.lock file. For some reason @types/react was being installed directly in node_modules/@types/react as well as node_modules/@types/react-dom/node_modules/@types/react (and every other type definition that depended on @types/react). Normally rm -rf node_modules && yarn install fixes this kind of thing, but yarn just kept installing the duplicate dependancies. Deleting the lock file seemed to take care of the issue though.

If anyone is using yarn and is encountering this issue try

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

and see if that clears up your issue.

All 4 comments

Figured it out, some dependencies were set as dependencies instead of devDependencies, in our use case we can set them as devDependencies but as mentioned in this discussion https://github.com/Microsoft/types-publisher/issues/81 I guess that a lot of people are using their types as dependencies and will have issues if they are still on react 15. Wouldn't it be better to release the types referencing to the version they were written for?

For example react-dom 15.x.x would reference react ^15.0.0 instead of always getting the latest?

Thoughts?

It seems my issue here was not so much an problem with how the type definitions are written, but seems to be an issue with something being stuck in my yarn.lock file. For some reason @types/react was being installed directly in node_modules/@types/react as well as node_modules/@types/react-dom/node_modules/@types/react (and every other type definition that depended on @types/react). Normally rm -rf node_modules && yarn install fixes this kind of thing, but yarn just kept installing the duplicate dependancies. Deleting the lock file seemed to take care of the issue though.

If anyone is using yarn and is encountering this issue try

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

and see if that clears up your issue.

This is https://github.com/yarnpkg/yarn/issues/3967, and it is probably a good idea to check your lock file for duplicates, if only for size optimization. After I upgraded to React 16, I was having issues with the prop-types package being duplicated in lots of places (required even in production for context).

I think all the packages that depend on @types/react should have it marked as a "peerDependnecy". "peerDependency" would ensure that only one version of @types/react is ever installed. This also matches the packages themselves normally declare dependencies: https://github.com/facebook/react/blob/004cb21bbb5db92734f763b44419d0c4d071c873/packages/react-dom/package.json#L20-L22

I don't know how much work is involved in fixing this, or if there's anything further I can do to help.

Was this page helpful?
0 / 5 - 0 ratings