DehydratedState type error

Verify canary release

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

“next”: “12.2.5” Works “next”: “^12.2.5” Fails “next”: “latest” Fails (12.3.0)

Provide environment information

Binaries: Node: 17.6.0 npm: 8.5.1 Yarn: 1.22.10 pnpm: N/A Relevant packages: next: 12.2.5 eslint-config-next: 12.2.5 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Amplify deploying SSR build using “next build”

Describe the Bug

Type error created when trying to reference “dehydratedState” from pageProps (using react-query) in app.tsx. Temporarily solved by changing the type of pageProps to any or reverting next to version 12.2.5

In _app.tsx,

import { AppProps } from 'next/app'; function MyApp({ Component, pageProps }: AppProps): JSX.Element { ... <Hydrate state={pageProps.dehydratedState}> ...

Worked in previous versions of next

Expected Behavior

No type error on build

Link to reproduction

bug report template with npx create next-app -e reproduction-template

To Reproduce

Create next react app, add react-query as a package

update the main app definition to use type from AppProps (imported from next/app)

function MyApp({ Component, pageProps }: AppProps): JSX.Element {

Add a default dehydratedState

<Provider store={store}> <ThemeProvider theme={theme}> <QueryClientProvider client={queryClient}> <Hydrate state={pageProps.dehydratedState}> <MainApp> <Component {...pageProps} /> </MainApp> </Hydrate> </QueryClientProvider> </ThemeProvider> </Provider>

Create an aws amplify frontend application and connect it to a branch. Configure the output directory to be .next and the build command to be “next build” or “yarn/npm build”. Ensure that amplify recognizes the new app as using SSR

Temporary Workarounds

Revert next to version 12.2.5 == or == In app.tsx, change the type of pageProps to be any OR redeclare it with a type of any before using it. i.e - function MyApp({ Component, pageProps: p }: AppProps): JSX.Element { const pageProps: any = p;

[fillon]

Try

function MyApp({ Component, pageProps }: AppProps<{ dehydratedState: unknown }>)

[sanukjoseph]

//_app.tsx

import type { AppProps } from "next/app";
import { useState } from "react";
import {Hydrate,QueryClient,QueryClientProvider,type DehydratedState} from "react-query";

function App({ Component,pageProps,}: AppProps<{ dehydratedState: DehydratedState }>) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default App;