@types/styled-componets not block @types/react version

[xingyibiao]

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown --clipboard

System:

• OS: macOS 12.3.1
• CPU: (10) x64 Apple M1 Pro
• Memory: 827.79 MB / 32.00 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
• Yarn: 1.22.17 - ~/.nvm/versions/node/v12.14.1/bin/yarn
• npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm

npmPackages:

• styled-components: 5.1.1 => 5.1.1

Reproduction

https://codesandbox.io/s/styled-components-base-gc367

Steps to reproduce

npx react-app-rewired build

tsc throw an error: Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'

node_modules/@types/styled-components/node_modules/@types/react/package.json version is 18.0.0

@types/styled-components dependencies: "@types/hoist-non-react-statics": "",
"@types/react": "",

Is @types/react v18 has break change, but @types/styled-components not block that version?

Expected Behavior

build success

Actual Behavior

build error

[xingyibiao]

my react and react-dom version is 16.9.0, not ready to upgrade react@18

[ethandaniel]

I'm getting the same error! Seems like styled-components ReactNode overwrites React.ReactNode type. Please help me figure out how to fix this. Error shown below:

No overload matches this call.
Overload 1 of 2, '(props: SwitchProps | Readonly): Switch', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Overload 2 of 2, '(props: SwitchProps, context: any): Switch', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.ts(2769)
index.d.ts(125, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'
index.d.ts(125, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'

[stitch-rich]

This is an issue with @types/styled-components not styled components itself. The type is requiring * of @types/react. The simplest fix if you are not ready to update is to add a manual resolution for now in your package.json to enforce a version below 18 of @types/react

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

[xingyibiao]

This is an issue with @types/styled-components not styled components itself. The type is requiring * of @types/react. The simplest fix if you are not ready to update is to add a manual resolution for now in your package.json to enforce a version below 18 of @types/react

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

if use npm, maybe should move @types/react to dependencies after set resolutions not fix

set it: issue

thx, fix me