javascript - 'Component' nemožno použiť ako JSX komponent. Nextjs

Takto vyzerá _app.tsx:

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

a pri zostavovaní projektu sa mi zobrazuje táto chyba:

Type error: 'Component' cannot be used as a JSX component.
  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 incompatible 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'.

Toto sú verzie Reactu:

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

Skúsil som prepnúť na verziu 18, fungovalo to, ale zobrazila sa mi táto chyba: Hydratácia zlyhala, pretože počiatočné používateľské rozhranie nezodpovedá tomu, čo bolo vykreslené na serveri

Odpoveď č. 1

Pridajte nasledujúci kód do súboru package.json

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

Potom znovu nainštalujte balíčky

yarn
  • ak používate npm
npm i

Odpoveď č. 2

Aktualizujte typy React na 18 v devDependencies (ak už používate 17.x):

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

Súvisiace články