TypeError : 'Component' cannot be used as JSX component

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #1 SMP Wed Aug 25 23:20:18 UTC 2021 Binaries: Node: 14.18.2 npm: 8.3.0 Yarn: 1.22.17 pnpm: N/A Relevant packages: next: 12.1.6 react: 17.0.2 react-dom: 17.0.2

Which example does this report relate to?

with-redux

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am using nextjs example with-redux . The current version of devDependencies @types/react and @types/react-dom gives type error Type Error 'Component' cannot be used as a JSX component.
Below is screenshot showing error

The problem can be solved by upgrading the @types/react and @types/react-dom dependencies

Expected Behavior

TypeError should not occur

To Reproduce

If you do not see the typeError after cloning this example repository run next build to see typeError while build process .

[codemile]

This workaround is to add a resolution section to your package.json to ensure the correct TS defs were installed.

"resolutions": {
    "**/@types/react": "^17.0.21",
    "**/@types/react-dom": "^17.0.9"
}

You can change the above versions to which ever ones you’re using on your project.

I haven’t fully tested the above, but it seems to have worked for me on a quick test.

Note: I had to delete my node_modules and reinstall for this to work. Yarn doesn’t seem to pick up on resolution changes, and also notice that the paths are prefixed with “**/” to capture deep dependencies.

[saurabhmehta1601]

Upgrading these depencencies solves the issue :

    "@types/react": "^18.0.10",
    "@types/react-dom": "^18.0.5"