stormy-gold

Error on _app.tsx

on the latest version of nextjs i get this error

type NextPageWithLayout = NextPage & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
    const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
    const Layout = Component.Layout ?? Noop
    const authProps: boolean | undefined = Component.authenticate

    return (
        <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <AppSettings>
                    <UIProvider>
                        <ModalProvider>
                            <>
                                <DefaultSeo />
                                {authProps ? (
                                    <PrivateRoute authProps={authProps}>
                                        <Layout {...pageProps}>
                                            <Component {...pageProps} />
                                        </Layout>
                                    </PrivateRoute>
                                ) : (
                                    <Layout {...pageProps}>
                                        <Component {...pageProps} />
                                    </Layout>
                                )}
                                <ToastContainer autoClose={2000} theme="colored" />
                                <ManagedModal />
                            </>
                        </ModalProvider>
                    </UIProvider>
                </AppSettings>
                <ReactQueryDevtools />
            </Hydrate>
        </QueryClientProvider>
    )
}

type NextPageWithLayout = NextPage & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
    const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
    const Layout = Component.Layout ?? Noop
    const authProps: boolean | undefined = Component.authenticate

    return (
        <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <AppSettings>
                    <UIProvider>
                        <ModalProvider>
                            <>
                                <DefaultSeo />
                                {authProps ? (
                                    <PrivateRoute authProps={authProps}>
                                        <Layout {...pageProps}>
                                            <Component {...pageProps} />
                                        </Layout>
                                    </PrivateRoute>
                                ) : (
                                    <Layout {...pageProps}>
                                        <Component {...pageProps} />
                                    </Layout>
                                )}
                                <ToastContainer autoClose={2000} theme="colored" />
                                <ManagedModal />
                            </>
                        </ModalProvider>
                    </UIProvider>
                </AppSettings>
                <ReactQueryDevtools />
            </Hydrate>
        </QueryClientProvider>
    )
}

3 Replies

stormy-goldOP•4y ago

with that way i get another error

type NextPageWithLayout<T> = NextPage<T> & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout<T> = AppProps<T> & {
    Component: NextPageWithLayout<T>
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp: NextPageWithLayout<AppPropsWithLayout<DehydratedState>> = ({
    Component,
    pageProps,
}: AppPropsWithLayout<DehydratedState>) => {...}

type NextPageWithLayout<T> = NextPage<T> & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout<T> = AppProps<T> & {
    Component: NextPageWithLayout<T>
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp: NextPageWithLayout<AppPropsWithLayout<DehydratedState>> = ({
    Component,
    pageProps,
}: AppPropsWithLayout<DehydratedState>) => {...}

conscious-sapphire•4y ago

seems to be solely related to nextjs typings, no? You'd probably get the same issue with any other prop sent down via pageProps

conscious-sapphire•4y ago

unrelated: don't create a QueryClient with useMemo ! explanation here: https://tkdodo.eu/blog/use-state-for-one-time-initializations

useState for one-time initializations

Why you shouldn't rely on useMemo for guaranteed referential stability but prefer useState instead

Gaming

Programming

Error on _app.tsx

Did you find this page helpful?