Cannot wrap App in HOC

[AlexandrePhilibert]

What is the problem?

I am not able to wrap the App component with the appWithTranslation HOC provided by : https://github.com/isaachinman/next-i18next

Paste all your error logs here:

Error: No QueryClient set, use QueryClientProvider to set one

Source
app/auth/components/LoginForm.tsx (12:38) @ LoginForm

  10 | 
  11 | export const LoginForm = (props: LoginFormProps) => {
> 12 |   const [loginMutation] = useMutation(login);
     |                                      ^
  13 | 
  14 |   return (
  15 |     <div>

Paste all relevant code snippets here:

_app.tsx should look like this :

import { appWithTranslation } from "next-i18next";

function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page);

  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <ErrorBoundary
          FallbackComponent={RootErrorFallback}
          onReset={useQueryErrorResetBoundary().reset}
        >
          {getLayout(<Component {...pageProps} />)}
        </ErrorBoundary>
      </ThemeProvider>
    </>
  );
}

export default appWithTranslation(App);

What are detailed steps to reproduce this?

1. Add next-i18next to a blitz app following : https://github.com/isaachinman/next-i18next

Run blitz -v and paste the output here:

Linux 5.11 | linux-x64 | Node: v16.6.1

blitz: 0.39.0 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.11 Pop!_OS 21.04
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 2.75 GB / 15.59 GB
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.1/bin/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v16.6.1/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.28.0 => 2.28.0 
    blitz: 0.39.0 => 0.39.0 
    prisma: 2.28.0 => 2.28.0 
    react: alpha => 18.0.0-alpha-b9934d6db-20210805 
    react-dom: alpha => 18.0.0-alpha-b9934d6db-20210805 
    typescript: ~4.3 => 4.3.5 

Please include below any other applicable logs and screenshots that show your problem:

Blitzjs seems to not render the children of the App component if it is being wapped with a HOC

[AlexandrePhilibert]

Here is a repo reproducing the issue : https://github.com/AlexandrePhilibert/blitzjs-nexti18-next

[flybayer]

ok, thanks @AlexandrePhilibert!

[aleplusplus]

I have the same issue

[flybayer]

For whoever wants to work on this, here's the code that needs changed: https://github.com/blitz-js/blitz/blob/canary/packages/babel-preset/src/add-blitz-app-root.ts#L15

Currently that results in

export default withBlitzAppRoot(appWithTranslation(App))

but we need to change it to result in

export default appWithTranslation(withBlitzAppRoot(App))

[beerose]

Reopening this as it seems to be an issue again — related discussion: https://discord.com/channels/802917734999523368/913414036778008636/913444197128876052

[flybayer]

@beerose we nolonger have the withBlitzAppRoot wrapper. I think the issue in discord is something else

[beerose]

Ok, going to close it then.