@types/react@18 break @types/styled-components

[xingyibiao]

our project use react@16.9, and styled-components. @types/react@18.0 release break my project, because my project dependence conflict with @types/styled-components dependence. @types/styled-components dependence @types/react@*, not block @types/react version.

see it: issue

[stitch-rich]

Having the same issue

[sergeykoryagin]

having the same

[WilliamCaetano]

Same issue here, a lot of files not compiling.

[ruanlinos]

Same issue here, relates to @types/react @types/react-dom

[altruong]

Same here, see related thread here

[FelipeCostaFK]

Same

[JiggyJinjo]

Even though there is a mistake in the @types/react, it's styled-component's fault for using the * wildcard in their package.json for @types/react

[NickSchudloProdigy]

Even though there is a mistake in the @types/react, it's styled-component's fault for using the * wildcard in their package.json for @types/react

Where is the wildcard defined? Because it doesn't look like that's a defined dependency: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/package.json

I'm having the same issue with @types/react-redux. The package has the wildcard dependency but the package.json doesn't specify @types/react directly https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/package.json

[stitch-rich]

The @types/react change is correct. The change made is a long standing/known issue. But the wildcard in styled-components is causing errors. My specific issue is not in the project itself but from a couple of third party libs that aren't ready for this change. You can fix the version via the resolutions of your package.json.

I found this solved the issue for the specific libraries I was having issues with

"resolutions": {
    "@types/react": "17.0.43"
  }

[outNapGnaw]

if npm , because of @types/react-redux bug
This solved the issue

"dependencies": {
  "@types/react": "^17.0.41"
}

[xingyibiao]

if use yarn, just set resolutions can fix. if npm, move @types/react to dependencies.

[GuillaumeCLProdigy]

If you're using at least npm 7 you can give overrides a try to resolve this. That said, it's quite concerning that new versions of a dependent package can break old builds, especially in a post-peacenotwar world.

[Jared-Dahlke]

@xingyibiao why is this closed? I am still having this issue. The above recommendations did not work. Most of my dependencies are breaking because they have @types/react v 18

[xingyibiao]

@xingyibiao why is this closed? I am still having this issue. The above recommendations did not work. Most of my dependencies are breaking because they have @types/react v 18

sry, my project has work when my package.json add resolutions field and move @types/react to dependences. I know this issue is a bug should be fix. so should I reopen this issue?

[rocklee889]

same~!

[jpardocimo]

Hi! I solved it adding this code

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

to package.json file and run yarn command.

Credits for: https://stackoverflow.com/users/15166457/yevhen-rybak

His solution: https://stackoverflow.com/a/71828113

[The-Code-Monkey]

rather than force the resolution version, delete your lock file and let install recreate it, worked for me along with the react 18 codemod.

[jpardocimo]

rather than force the resolution version, delete your lock file and let install recreate it, worked for me along with the react 18 codemod.

Didn't work for me. Even deleting lock file and node_modules etc...

[s-ueno]

For non-local development environments, such as GitHub Actions, I was able to solve the problem by adding "preinstall": "npx npm-force-resolutions", to scripts and enabling the resolutions configuration.

[bryce0516]

I using typscript in react-native.
I did update like this"@types/react": "^17.0.44" .
but issue is not fixed...
so I check my npm version, my npm version is 6.xx. then upgrade to npm 8.xx
and I remove node_modules and package-lock.json. then npm install. that fix my issue.
sorry for poor english

[drpiou]

I must say that I am already tired of this resolutions thingis happening many times, but many thanks to @stitch-rich, it works

[Altomy]

I have the problem from 20 days
and fixed it today without any config.

Just replace install modules from yarn to npm

remove node_modules and install it use npm install

[QC-L]

Having the same issue. When will it be fixed?

[ionansantos]

Pra quem usa yarn segue o mesmo

no package.json adicione em "dependencies"

"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"

depois so dar um "yarn" e seja feliz :D

[Tharaxis]

This seems to largely stem from the move of FC to be the equivalent of VFC, which makes absolutely zero sense to me, it made sense to have a separate definition that specified an element that took no children, and provided significantly more terse syntax.

This:

const Component: FC<PropsWithChildren<Props>> = (props) => {
}

is objectively clunkier than

const Component: VFC<Props> = (props) => {
}

and it only gets worse the more complex your definition needs to be.

This is a completely untenable change, there's massive swaths of code and projects out there that have gone that route only to have the definition pulled out, causing tons of packages to no longer compile or validate appropriately. Changing small projects are fine, but I work on a project that has hundreds, if not thousands, of components of which a vast majority now don't compile and expecting me to be able to update all my packages so they now work is just completely unrealistic in an actual large-scale production project.

My only solution is to stick to the v17 defs, but that's just not the way it should have to work.

Changes like this really should not happen, or there should be some kind of migration path. This seems like a very cavalier change.

[niklasholm]

Even if you put the correct version of @types/react as a resolution dependency @types/styled-components is still broken on it's own because of commit d4098e3 that was part of the same PR. You need to exclude @types/styled-components >= 5.1.25 from your dependencies.

[tiagocharo]

This version works for me:

"@types/react": "17.0.43"

[yepMad]

We are on react-native, @react/18.0.0. All props are omit:

[vlakyi]

Is there any update? The modules resolution solution is not working for me with "react": "18.2.0" and "@types/styled-components": "5.1.24".

[yepMad]

Definitely solves my problems in expo 46 (react@18.0 and react-native@0.69.5)

"resolutions": {
    "@types/react": "^18.0.18"
  }

[malininss]

Hi everyone! I've done a little research and I think I can explain why this is happening.

React 18 types are incompatible with react 16 types, as everyone has already understood, it is because of props child and other different thinks.

Library @types/styled-components has as a dependency package
"@types/react": "*"

You can find this in your folder node_modules@types\styled-components\package.json
"*" means that the project takes the latest version of the @types/react package.

When you used to React 17 in your project (before updating to version 18), your yarn.lock probably was something like this:

"@types/react@*", "@types/react@^17.0.35":
  version "17.0.35"
  ***
  ***

It means that every projects with @types/react@* uses types of version 17.0.35

After updating to version 18 your yarn.lock became like this:

"@types/react@*:
  version "17.0.35"
  ***
  ***

"@types/react@^18.0.21":
  version "18.0.21"
  ***
  ***

You can see that despite on "*" in the dependency @types/styled-components for types, the version of "@types/react@* still uses the 17 version of react types. Logically, it should have been updated, but it was not updated in fact. I don't know why, but this problem exists with all packages

So there are two ways to fix this error:

1. Create resolution in your package.json

Put this in the package.json file:

"resolutions": {
    "@types/react": "^18.0.21"
}

And execute command yarn install --force
After that you can see that the code in the yarn.lock file became

"@types/react@*", "@types/react@^18.0.21":
  version "18.0.21"
  ***
  ***

So "resolutions" means: "For all packages uses lower version, use version 18 if it is possible".

2. Clean up your yarn.lock file

Remove all code about @types/react from your yarn.lock yarn execute yarn install --force.
In this case dependency with * takes the latest version of @types/react (18) and everything will fine.

[Karsenh]

I have tried every "solution" in this thread as well as many of the linked thread - nothing is working...

I literally have changed nothing in my project from a month ago when everything was working and almost every file is now red - why is this so overly complicated for seemingly no reason?

I have downgraded to React/React-dom V 17.0.2 in attempts to fix the issue as well and even that's not solving my problem. What's going on?

[malininss]

@Karsenh i'm prettie sure the my last solution will help you. Just check your package-lock.json or yarn.lock and make sure that all your @types/react versions use react 18 version like this:

"@types/react@*",  "@types/react@^17.0.00" "@types/react@^18.0.21":
  version "18.0.21"
  ***
  ***

If it is not help you maybe you have another error. And don't forget refresh your typescript/eslint server:

[Karsenh]

@Karsenh i'm prettie sure the my last solution will help you. Just check your package-lock.json or yarn.lock and make sure that all your @types/react versions use react 18 version like this:

"@types/react@*",  "@types/react@^17.0.00" "@types/react@^18.0.21":
  version "18.0.21"
  ***
  ***

If it is not help you maybe you have another error. And don't forget refresh your typescript/eslint server:

Hey Sergey, thank you very much for the reply.

My package-lock.json looks like this:

where you can see the @types/react which I believe you're referring to are "*"

I have changed them to the following but they revert whenever I run npm i:

Also something extremely perplexing: I have a copy of this project on another computer just before I started making changes to deploy to Heroku (which still worked after I made those changes and updated my remote repo) but I opened that one just now and it is not having issues. The only main difference is the file hierarchy (I moved the server out to the root dir).

I just ran npm i on this old project, as the package-lock didn't even have the new types/react versions defined which I noticed looking at the difference between the broken one and this older working one. I figured running npm i to update packages would certainly break this project as well because that's when my other project (the latest one I'm working on) broke, but it didn't..... This version is working and I don't see any difference at all.

The working project's package-lock has the following:

which perplexes me.

It's the same as the broken project..

I've restarted the TS server on both. I couldn't break this other project if I wanted to. I can't understand what the issue could be.

EDIT: Holy crap.... This whole time it was because of the file hierarchy which I even said on multiple posts.... 🤦🏼‍♂️🔨

In my defense, this file file hierarchy used to work and for some reason is now causing issues. 😅