1

React recently released a new version that has breaking changes to the TypeScript typings (Can be read about here). Packages that require "@types/react": "*" target this new version automatically and cause my project to break.

I thought that I'd go to the projects that have this style of requirement and either ask them to change the dependency to optional or remove it. Then I thought I'd be more proactive and make a pull request to make the change myself and get some experience contributing to open source.

However, I have yet to find where this change would be made in the project. I have looked through the first 5 packages that have this problem and have yet to find where @types/react is required.

As an example, in my package-lock.json file the listing for @types/react-redux shows that it requires @types/react: "*"

@types/react-redux entry in package-lock.json file

So I go to the npm page for @types/react-redux and follow the link to the github page (I also verified that I'm on the most recent version). I would expect the required packages to be found in the package.json file there, and they all are except @types/react.

contents of package.json for @types/react-redux

We are having a heck of a time trying to get our project working again after the changes to React being automatically pulled in because of these required "*" versions of @types/react.

Can anyone help educate me as to where this is coming from so that I could either make pull requests for these projects or ask the maintainers to make the change?

Case Silva
  • 466
  • 7
  • 26
  • 1
    In `yarn` (v1), you can use the [`resolutions` field](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) in `package.json` to force a specific version. Recent versions of `npm` offer [similar functionality](https://stackoverflow.com/a/67397982/14357) with the [`overrides` field](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) in `package.json`. Might these be the shovels you can use to dig your way out? – spender Apr 21 '22 at 14:44
  • @spender I think that might be what we have to do. It's unfortunate that there's not a non "hard-coded" solution to this, but I think it'll have to do for now. Thanks! – Case Silva Apr 22 '22 at 12:53

1 Answers1

1

It's because index.d.ts imports react, but since package.json does not contain an explicit dependency on @types/react, DefinitelyTyped adds it automatically to the generated package.json of the npm bundle using information provided by the TypeScript compiler.

To pin the dependency version, simply add it explicitly to package.json, e.g.:


{
    "private": true,
    "dependencies": {
        "@types/hoist-non-react-statics": "^3.3.0",
        "@types/react": "16",
        "hoist-non-react-statics": "^3.3.0",
        "redux": "^4.0.0"
    }
}

("@types/react": "16" is just an example - use a version or version range that fits). For a real example, see this merged pull request that introduces a similar change.

GOTO 0
  • 42,323
  • 22
  • 125
  • 158
  • Gotcha, thanks for that info. So if I wanted to make PR for one of the projects in DefinitelyTyped, I'd have to add a version in the dependencies in that projects package.json file? Feels like I'd be steamrolling other users' projects if I put in "@types/react": "^17" if someone else is using 15, 16, 18, whatever (assuming that the request was approved, which I assume it wouldn't be). Is there a safer/more universal way to tell the project not to try to install the most recent version if there is a defined installation elsewhere (like my projects package.json file)? – Case Silva Apr 21 '22 at 18:49
  • @CaseSilva A version range, e.g. `"@types/react": ">=15 <18"` will install the latest version that satisfies the range constraints, unless your `package.json` explicitly indicates a more specific version that is still inside the range. – GOTO 0 Apr 21 '22 at 19:49