How to return ReactNode instead of void?-CodePudding

I am following this documention to have two different Layout in my Next.js app.

https://nextjs.org/docs/basic-features/layouts

I try to convert the _app.js to _app.tsx, but got an error when running yarn build. Do you have any idea what is wrong?

I was inspired from this document also how Redux Persist on client side works: https://github.com/kirill-konshin/next-redux-wrapper

./pages/_app.tsx:40:11
Type error: Type '({ store }: ReactReduxContextValue<any, AnyAction>) => void' is not assignable to type '(value: ReactReduxContextValue<any, AnyAction>) => ReactNode'.
  Type 'void' is not assignable to type 'ReactNode'.

  38 |         </Head>
  39 |         <ReactReduxContext.Consumer>
> 40 |           {({ store }) => {
     |           ^
  41 |             <PersistGate
  42 |               persistor={store.__persistor}
  43 |               loading={<div>Loading..</div>}

// _app.tsx

import "../styles/globals.css";
import Layout from "../components/Layout";
import { wrapper } from "../store";
import { PersistGate } from "redux-persist/integration/react";
import { useStore, ReactReduxContext } from "react-redux";
import axios from "axios";
import Head from "next/head";
import CookieDialog from "../components/CookieDialog";
import FooterDesktop from "../components/FooterDesktop";
import FooterMobile from "../components/FooterMobile";
import styles from "../styles/Layout.module.css";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import type { AppProps } from "next/app";

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout =
    Component.getLayout ||
    ((page) => (
      <>
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
        <ReactReduxContext.Consumer>
          {({ store }) => {
            <PersistGate
              persistor={store.__persistor}
              loading={<div>Loading..</div>}
            >
              <Component {...pageProps} />
            </PersistGate>;
          }}
        </ReactReduxContext.Consumer>
        <CookieDialog />
        <div className={styles.footerDesktop}>
          <FooterDesktop />
        </div>
        <div className={styles.footerMobile}>
          <FooterMobile />
        </div>
      </>
    ));

  return getLayout(<Component {...pageProps} />);
}

export default wrapper.withRedux(MyApp);

CodePudding user response：

Let try:

{({ store }) => {
        return something
      }}

 { ({ store }) =>  something }

arrow function: ()=> { return 1 } vs ()=> 1 are the same.

CodePudding user response：

Because of the curly braces, you are actually not returning anything. Change them to parantheses or add the return keyword. This will most probably fix the issue.

<ReactReduxContext.Consumer>
{({ store }) => ( // Change curly braces to parantheses
    <PersistGate
    persistor={store.__persistor}
    loading={<div>Loading..</div>}
    >
        <Component {...pageProps} />
    </PersistGate>;
)}
</ReactReduxContext.Consumer>