0

I'm upgrading a legacy project to React 16.14. We aren't ready to go to React 17 or 18 since it would cause too many breaking changes.

I'm upgrading redux and react-redux as well, using version 8.1.2 of react-redux which officially supports React version 16.

However, react-redux has a dependency tree like this:

└─┬ react-redux@8.1.2
  └─┬ @types/hoist-non-react-statics@3.3.1 
    └── @types/react@18.2.21

The problem comes from the conflict between the types used by @types/hoist-non-react-statics (react types version 18.2.21) and the react types of my project (version 16.14).

I get 176 compiler errors!

Even version 7 or react-reduct depends on the @types/hoist-non-react-statics@3.3.1 so I can't downgrade it.

Does anybody know a good way to fix this. I've read that I might be able to use the "resolutions" field if I use yarn for package management. I'd rather use npm unless its impossible to solve another way. I also haven't tried the yarn solution yet, so if anybody can vouch for that and explain how it works that could also be helpful.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Avi C
  • 297
  • 1
  • 3
  • 7

1 Answers1

0

To answer my own question.

I found that npm V9 has a key called "overrides" which does the same thing as yarn "resolutions".

npm equivalent of yarn resolutions?

https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

So

"overrides": {
    "@types/hoist-non-react-statics": {
      "@types/react": "16.14.46"
    }
  }

Works to force the use of version 16 in that dependency.

I tested it and all 176 TS compiler errors disappear! It took a few tries since it only worked after I deleted my node_modules folder and package-lock before running npm install.

Avi C
  • 297
  • 1
  • 3
  • 7