SSG - Infinite render loop - Too many re-renders. React limits the number of renders to prevent an infinite loop

[Vadorequest]

I am migrating my SSR-based app into an SSG/SSR (hybrid) app.

In the process, I'm encountering an error where I get _app.componentDidCatch - Unexpected error caught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

See

Steps to reproduce

1. Go to https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-d4rmaawhe.now.sh/en
2. Click on "Home" in the nav menu

You'll get a An unexpected error has occurred. and a link to https://reactjs.org/docs/error-decoder.html/?invariant=301 in the console

Development stack trace

The above error occurred in the <Layout> component:
    in Layout (at [locale]/index.tsx:52)
    in HomePage (at _app.tsx:157)
    in ApolloProvider (at _app.tsx:156)
    in NRNApp (created by WithApollo(NRNApp))
    in WithApollo(NRNApp)
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, NRNApp.

_app.componentDidCatch - Unexpected error caught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooks (react-dom.development.js:14815)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at HTMLUnknownElement.sentryWrapped (helpers.js:71)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at updateContainer (react-dom.development.js:24373)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24774)
    at Object.render (react-dom.development.js:24840)
    at renderReactElement (index.js:39)
    at doRender$ (index.js:45)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at doRender (index.js:41)
    at render$ (index.js:26)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at render (index.js:26)
    at Router.subscription [as sub] (index.js:24)
    at Router.notify (router.js:575)
    at Router.set (router.js:442) 

Debug

Would you have any advice on how to debug that? I have no clue as to what's the cause of the infinite loop.

It seems to be client-side based. I also happens when using query parameters, such as:

• nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-d4rmaawhe.now.sh/fr?utm_source=test
• nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-d4rmaawhe.now.sh/fr-FR?utm_source=test
• nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-d4rmaawhe.now.sh/?utm_source=test

It may be related to experimental rewrites/redirects:

experimental: {
    redirects() {
      const redirects = [
        {
          // Redirect root link with trailing slash to non-trailing slash, avoids 404 - See https://github.com/zeit/next.js/discussions/10651#discussioncomment-8270
          source: '/:locale/',
          destination: '/:locale',
          permanent: process.env.APP_STAGE !== 'development', // Do not use permanent redirect locally to avoid browser caching when working on it
        },
        {
          // Redirect link with trailing slash to non-trailing slash (any depth), avoids 404 - See https://github.com/zeit/next.js/discussions/10651#discussioncomment-8270
          source: '/:locale/:path*/',
          destination: '/:locale/:path*',
          permanent: process.env.APP_STAGE !== 'development', // Do not use permanent redirect locally to avoid browser caching when working on it
        },
      ];

      if (process.env.APP_STAGE === 'development') {
        console.info('Using experimental redirects:', redirects);
      }

      return redirects;
    },
    rewrites() {
      const rewrites = [
        {
          // XXX Doesn't work locally (maybe because of rewrites), but works online
          source: '/',
          destination: '/api/autoRedirectToLocalisedPage',
        },
        {
          // TODO Build "source" based on active locales (instead of hardcoded)
          source: `/:locale((?!${allowedLocales.join('|')})[^/]+)(.*)`, //  source: '/:locale((?!fr-FR|fr|en-US|en)[^/]+)(.*)',
          destination: '/api/autoRedirectToLocalisedPage',
        },
      ];

      if (process.env.APP_STAGE === 'development') {
        console.info('Using experimental rewrites:', rewrites);
      }

      return rewrites;
    },
  },

[Vadorequest]

This has been fixed. See UnlyEd/next-right-now@331c9d0

The reason was related to how i18next works internally, fixed by using a singleton to avoid reinitizalization between page rendering (CSR)

[Vadorequest]

👆Proper fix has been applied.