DehydratedState type error

[zachweiss24]

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;

[sreetamdas]

Related: #40371

[jukkaleh-atoz]

Related: #40371

It is not. On 12.3.1 build still fails:
Property 'dehydratedState' does not exist on type '{}'.

AppProps has type definition of:
export declare type AppProps<P = {}> = AppPropsType<Router, P>;

[fillon]

Try

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

[jonataspinto]

How i use appWithTranlation HOC what worked for me was:

const { dehydratedState } = pageProps as { dehydratedState: unknown };

[benschac]

Passing the state to the generic solves the issue:

import "../styles/globals.css";
import type { AppProps } from "next/app";
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
  DehydratedState,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";

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

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

export default MyApp;

[skasyn]

I also encounter this issue with v12.3.1

[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;

[iliatalebzade]

I'm facing the exact problem on version 12.3.1 too.

[dpejic]

How i use appWithTranlation HOC what worked for me was:

const { dehydratedState } = pageProps as { dehydratedState: unknown };

you saved my life bro