Rendered fewer hooks than expected, might be caused by early return statement, caused in _app

[wiktoriavh]

Describe the bug

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
The above error occurred in the component:

This error started happening once I installed next-i18next into my project, previously the project worked fine with my routes.

This error happens from time to time in development, I don't know how to reproduce it because it has no clear indication what the problem is. Here is the stack trace:

react-dom.development.js:15050 Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at renderWithHooks (react-dom.development.js:15050)
    at updateFunctionComponent (react-dom.development.js:17356)
    at beginWork (react-dom.development.js:19063)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at updateContainer (react-dom.development.js:25482)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26037)
    at Object.render (react-dom.development.js:26103)
    at renderReactElement (index.tsx:531)
    at doRender (index.tsx:794)
    at _callee2$ (index.tsx:423)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21
    at render (main.js?ts=1624603605207:8965)
    at Router.subscription [as sub] (index.tsx:370)
    at Router.notify (router.ts:1651)
    at Router.set (router.ts:1393)
    at Router._callee$ (router.ts:1156)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

react-dom.development.js:20085 The above error occurred in the <App> component:

    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624603605207:95886:24)
    at I18nextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624603605207:85980:19)
    at AppWithTranslation
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1624603605207:146:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1624603605207:250:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1624603605207:8662:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1624603605207:9151:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1624603605207:9282:24)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js:20085

This happens in _app.js according to this, I will paste my code here:

import Layout from '../components/layouts/Layout';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import {
  Accent500,
  Action500,
  Background800,
  Background900,
} from '../components/colors';
import { useEffect } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import PropTypes from 'prop-types';
import StoreMall from '../components/layouts/StoreMall';
import { appWithTranslation } from 'next-i18next';

/**
 * Custom Theme
 * Updated Palette Colours
 */
const customTheme = createMuiTheme({
 // MUI Theme Stylings...
  },
});

/**
 * Custom App
 * ! DO NOT CHANGE
 * ! THIS IS CURRENTLY COMPATIBLE WITH MUI
 * ! CODESANDBOX: https://codesandbox.io/s/nextjs-rwk32q2w6q?file=/pages/_app.js
 * ! GITHUB: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
 */
function App({ Component, pageProps }) {
  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  const getLayout = Component.getLayout || ((page) => page);

  return (
    <ThemeProvider theme={customTheme}>
      <StoreMall>
        <Layout>
          <CssBaseline />
          {getLayout(<Component {...pageProps} />)}
        </Layout>
      </StoreMall>
    </ThemeProvider>
  );
}

// export default App;

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

export default appWithTranslation(App);

And if you wonder what the getLayout method is, here is a snippet:

// Manager is a page
Manager.getLayout = () => {
  const { t } = useTranslation('manager');
  return getContentLayout(<Manager />, {
    tabs: [t('overview'), t('tasks'), t('notes')],
    outlineType: 'manager',
    title: t('title'),
  });
};

export const getContentLayout = (page, props) => (
  <ContentLayout
    tabs={props.tabs}
    outlineType={props.outlineType}
    title={props.title}
  >
    {page}
  </ContentLayout>
);

Occurs in next-i18next version

My versions copied from package.json:

    "next": "10.0.9",
    "next-i18next": "^8.5.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",

Steps to reproduce

https://github.com/Braweria/i18next-error

Here is the repo. The links might be broken, you can go to http://localhost:3000/content/manager and click on the link manager and the error actually happened in this repo as well while I was trying to build it. So at least this concern is now covered.

Expected behaviour

To render the right amount of hooks.

Screenshots

none

OS (please complete the following information)

• Device: Windows 10 LTS
• Browser: Chrome LTS

Additional context

This is also a problem that started happening, but I cannot tell if it is in combination with next-i18next:
My folder structure:

pages
  [app]
    [object]
      index.js
    index.js
    manager.js
    feed.js

When I try to navigate from /[app]/manager to /[app]/feed, or any other combination, sometimes I get the error that title cannot be read of undefined. The reason being, it tries to load the [object]/index.js file instead, which contains object.title.

Here is a StackOverflow question on this, if you want more information: https://stackoverflow.com/questions/68079029/nextjs-routing-error-when-changing-pages-the-wrong-file-is-trying-to-open

[isaachinman]

You will need to provide a minimal viable reproduction, by way of a GitHub repo, if you would like help debugging this. Thanks!

[wiktoriavh]

You will need to provide a minimal viable reproduction, by way of a GitHub repo, if you would like help debugging this. Thanks!

I can try to build something similar to mine, but the error happens quite infrequently that it is hard to tell if the repo will be correct or not.

[isaachinman]

That is indeed the purpose of making a reproduction minimal – to limit the number of variables. Often, one discovers the issue while trying to create the repro.

[wiktoriavh]

https://github.com/Braweria/i18next-error

Here is the repo. The links might be broken, you can go to http://localhost:3000/content/manager and click on the link manager and the error actually happened in this repo as well while I was trying to build it. So at least this concern is now covered.

[isaachinman]

This is not a minimal reproduction, you will need to simplify your pages and _app.

[wiktoriavh]

This is not a minimal reproduction, you will need to simplify your pages and _app.

Simplify in what way? Remove the styling? The routing, MUI in _app and so I tried to keep the same to my project so that it makes sense and the error could be reproduced.

[ljosberinn]

https://github.com/Braweria/i18next-error/blob/main/pages/%5Bapp%5D/manager.js#L36 I believe this line is causing it - using a hook outside of a component

You should be able to use useTranslation directly within app here and then pass it to getLayout.

[wiktoriavh]

@ljosberinn I have tried your correction and so far I did not see the error again. This was very likely the solution to my problem. Thank you for finding that.

[ljosberinn]

Can be closed then I guess!