This is how _app.tsx looks:

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

and I am getting this error while building project:

Type error: 'Component' cannot be used as a JSX ponent.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are inpatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/user/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

These are the react versions:

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

I tried to switch to 18 version, it worked but, I got this error: Hydration failed because the initial UI does not match what was rendered on the server

This is how _app.tsx looks:

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

and I am getting this error while building project:

Type error: 'Component' cannot be used as a JSX ponent.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are inpatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/user/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

These are the react versions:

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

I tried to switch to 18 version, it worked but, I got this error: Hydration failed because the initial UI does not match what was rendered on the server

• javascript
• reactjs
• typescript
• next.js

• What are you passing in to the Component prop? – Dave Newton Commented Apr 22, 2022 at 20:10
• @DaveNewton you mean about this: {...pageProps}? – Овов Очоы Commented Apr 22, 2022 at 20:12
• Make sure that the page you're trying to render is a valid React ponent. Keep in mind Component in this context is your page ponent, so it's saying that your page ponent is not a valid React ponent. – Regan Karlewicz Commented Apr 22, 2022 at 20:23
• No, I mean what are you passing to MyApp as the Component prop. – Dave Newton Commented Apr 22, 2022 at 20:25
• @DaveNewton if I correctly understood you, then I am not passing any prop to MyApp, because nextjs does passing something, I don't know what. It's the _app.tsx file – Овов Очоы Commented Apr 22, 2022 at 20:30

4 Answers 4

Add the following code into package.json file

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

Then Reinstall the packages

yarn

• if using npm

npm i

Update React types to 18 in devDependencies (If you use already 17.x):

"@types/react": "^18",
"@types/react-dom": "^18"

For me, update @types/react and @types/react-dom resolves the problem.

yarn add @types/react@latest @types/react-dom@latest

I think that is because you did not set typescript properly in your project. I think, currently, when you install next.js, you should have option to select typescript. If not

npm install --save-dev typescript @types/react @types/node.

in tsconfig.json, you should have "jsx": "preserve" in piler options. It allows us to use .tsx files in the project. an example of tsconfig.json

• I think this might be the issue. In order to indicate that we are returning jsx we have to wrap the ponent with (). but in your ponent you have

  return <Component {...pageProps} />
  

even though I tried to put (), vscode omits it. So try arrow function:

const App = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
);

export default App;