Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported

[tomitrescak]

Hello,

I just upgraded to the react 18 and since then I am receiving a following warning Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported

It seems that the culprit tis my custom document, but why?

import { getDataFromTree } from '@apollo/client/react/ssr';

import { getApolloClient } from 'lib/createClient';
import Document from 'next/document';

class DocumentWithApollo extends Document {
  // Reference: https://gist.github.com/Tylerian/16d48e5850b407ba9e3654e17d334c1e
  constructor(props) {
    super(props);

    /**
     * Attach apolloState to the "global" __NEXT_DATA__ so we can populate the ApolloClient cache
     */
    const { __NEXT_DATA__, apolloState } = props;
    __NEXT_DATA__.apolloState = apolloState;
  }

  static async getInitialProps(ctx) {
    // console.clear();

    const startTime = Date.now();

    /**
     * Initialize and get a reference to ApolloClient, which is saved in a "global" variable.
     * The same client instance is returned to any other call to `getApolloClient`, so _app.js gets the same authenticated client to give to ApolloProvider.
     */
    const apolloClient = getApolloClient(ctx.req, true);

    /**
     * Render the page through Apollo's `getDataFromTree` so the cache is populated.
     * Unfortunately this renders the page twice per request... There may be a way around doing this, but I haven't quite ironed that out yet.
     */
    await getDataFromTree(<ctx.AppTree {...ctx.appProps} />);

    /**
     * Render the page as normal, but now that ApolloClient is initialized and the cache is full, each query will actually work.
     */
    const initialProps = await Document.getInitialProps(ctx);

    /**
     * Extract the cache to pass along to the client so the queries are "hydrated" and don't need to actually request the data again!
     */
    const apolloState = apolloClient.extract();

    console.info(`Render Time: ${Date.now() - startTime} milliseconds.`);

    return { ...initialProps, apolloState };
  }
}

export default DocumentWithApollo;

[mwdiaz]

We're also seeing this and I believe that it has more to do with Apollo's getDataFromTree() API for running all required GraphQL queries in the component tree on the server (which, as you point out, requires an extra render pass) rather than just merely having a custom document. In our case, it's pretty easy to reproduce because we're using a higher-order component to wrap pages that need to use Apollo, and the warning only appears when rendering pages that are wrapped with this HOC. Furthermore, we have a mechanism to pass a flag to the HOC to disable server-side fetching on a page-by-page basis, which also makes the warning go away. While we do have a custom Document component, it exists primarily for adding a couple meta tags and a CSP nonce to the page (we handle passing the Apollo state from apolloClient.cache.extract() in a custom App component instead).

When I was debugging the warning, I discovered that apparently the provider being rendered at the time its logged is <AmpStateContext.Provider> as seen here. If I manually hack node_modules/next/dist/server/render.js locally to remove the provider, the warning also goes away with apparently no adverse side effects. We aren't using any AMP functionality.

I don't currently have a minimal reproduction, but I could spend some time putting one together if that would help troubleshoot this issue. We're using 18.2.0 for React and 12.2.3 for Next.js.

[mwdiaz]

I can confirm that the issue still occurs in 12.3.1, and the above workaround still works.

[mwdiaz]

This seems to be fixed in Next 13 (at least for our application).

[dominik-sfl]

Also just ran into this with v13.4.4

[sairion]

same, it is pretty glitchy though

[jamiter]

Not fixed for us too

[adicco]

Same here, although it works intermittently.

[adarsh-drishya]

how did you fix it man, i am trying to use app router here in the new application created.

[mitchuman]

running into this warning on v13.4.4. (it's not hindering my process, but annoying as it's getting logged in the console on each page render)

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at AppContainer (/Users/.../next/node_modules/next/dist/server/render.js:337:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/.../next/node_modules/next/dist/server/render.js:373:57)
    at div
    at Body (/Users/.../next/node_modules/next/dist/server/render.js:673:21)

[Philip-Nunoo]

Downgrading my next version to 13.1.1 solved it for me.

[SalazarSDF]

I got that error when tried configure i18n in two different place from next.config.js and from app/i18n and middleware.js. When i cleaned my next.config.js, error is gone. I guess it's not your case, but i hope it will help someone.
( "next": "13.4.4")

[asjustis]

This solved this for me

[psidh]

Thank you So much Bro!!
I had issue in Creating a SignIn through Google for my NextJs 13 app

[exelimpichment]

thank you so so so so so much mate

[conmute]

I had similar issue, but then it suddenly stoped after I moved outside /app my @modal/(.)* routes, and manually moved them back in

➜  app git:(main) ✗ nvm current
v18.15.0
➜  app git:(main) ✗ cat node_modules/next/package.json | grep \"version\":
  "version": "13.4.5",

[murrowblue22]

Any new update on this issue, i'm running next 13.4.2, with a custom express server handling my api routes, not sure what is causing these warnings...... any assistance would be greatly appreciated

[umeshkukreti27]

any new updates on this issue?

[bitstein]

I am having this issue as well on a bare minimum NextJS setup. I used npx create-next-app@latest and made an app using the app router. Next version is 13.4.7, react version is 18.2.0.

In app I added a blog directory, and in that added a [slug] directory. page.tsx inside of that:

export const dynamicParams = false;

export default function MempoolPost() {
  return <h1>Post</h1>;
}

export async function generateStaticParams() {
  return [{ slug: "post" }];
}

I get the error if I go to my url and enter either /blog/post while on /blog/other or vice versa. If I make dynamicParams = true (or remove the line for the same effect), it does not occur.

Edit: reverting to 13.1.1 fixed this error, so I assume there is some kind of regression since that release.

[alylim]

Can you try:
export const dynamic = "force-static";

instead of:
export const dynamicParams = false

That seemed to have fixed the warning for me.
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams

[spcbfr]

@bitstein having this error as well.

[Gnadhi]

Yes, Im experiencing this issue as well any updates?

[Steravy]

I am facing the same issue, and still don`t know the cause. Any suggestion on how to fix it?

[vinsdicosmo]

Same error with 13.4.9

[pkpukaow]

i found this today on nextjs 13.4.9

how can i solve ths one

[dannyk08]

happening with 13.4.10 as well

[ronalddas]

same error for 13.4.12

[angelpadillar]

This issue still happens, @latest next

[givik]

Hello guys, this still happens in my project:

"next": "^13.4.19",
"react": "^18.2.0",
"react-dom": "^18.2.0"

Thank You!

[gatopanx]

Fixed by adhering to the new app router convention from app/about.tsx to app/about/page.tsx Source: https://nextjs.org/docs/app/building-your-application/routing. Seems like the new router (app) picks up old router (pages) style pages and tries rendering them twice in a single web rendering cycle.

[danialhawari]

[Doochukbeni]

I was able to solve this issue in my case by following the current Nextjs 13.4.19 routing pattern . if you are using the app router with the src folder then your folder structure should be structured this way: src/app/api/auth/[...nextauth]/route.ts.
Avoid doing something like this src/app/api/auth/[...nextauth].ts . The current documentation recommend using route.ts or route.js file for api routes and page.ts or page.js for page routing inside the app directory.

[p24-max]

I was able to fix this issue by removing empty folder "src/pages".

[jpwhitaker]

Same, i had to delete all empty directories under app.

[brendanfurtado]

Deleting the src/pages directory helped me

[Brammm]

Chiming in, I had this error when submitting a form with React Hook Form to a server action. Using the useTransition method fixed it

[daveidivide]

I just went wrong in circles for ages with this.

But it turns out I had my folder name as [id].tsx instead of just [id].

[mozeryansky]

omg that is also what I did...

Filing a bug report is too difficult, I've made a discussion for now: #55854

[jnelken]

Of course! Because the docs don't use the app router app/page.js and suggest you name your files [abc].js. Of course I made the folder [abc].js 🤦🏼

[mozeryansky]

@jnelken The docs are correct, but I do see page routing uses "[abc].js" and app uses "[abc]". Make sure you change the docs using the button on the top right.

These are the direct links:
App: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Pages: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

[landvibe]

In my case, generateStaticParams + server action was the cause.
it disappeared when generateStaticParams or server action was removed.

[afazzdev]

Your answer save my time.. thx!

[j-sup]

This problem - inability to server actions on a page that uses generateStaticParams - has been around for a while.

[shunshimono]

Hello everyone,

I've recently encountered an issue that seems to resonate with the discussions happening in this thread. I'm working on a Next.js application with Apollo Client, and I'm using renderToStringWithData for SSR. However, I've noticed inconsistent behavior when the application receives simultaneous requests, particularly when multiple browser tabs are opened at the same time.

Environment

• Next.js 12.2.2
• Apollo Client version 3.6.8

Expected Behavior

Each page request, when accessed simultaneously across different tabs, should independently wait for renderToStringWithData to complete, ensuring the page renders with fully fetched data.

Observed Behavior

Instead, one tab seems to render correctly with SSR, while the other appears to fall back to client-side rendering (CSR), not waiting for the data fetching request to complete.

Attempted Resolutions

I've tried updating Next.js to the latest version, which resolved some warnings, but did not fix the main issue. I initially thought this could be related to a caching issue or perhaps a problem with the way initializeApollo is configured, especially since it's supposed to return a new Apollo Client instance on every server-side request. Additionally, I've verified that we're not intentionally polyfilling the window object on the server side, so the environments should be distinct.

I'm curious if anyone else has experienced this behavior and understands the potential reasons behind it. Also, any suggestions on best practices to enforce consistent SSR behavior, even under simultaneous high-load scenarios, would be greatly appreciated.

Thank you in advance for any insights or assistance you can provide!

[0tuedon]

Well, removing the .next folder and removing the empty pages folder helped for now

[IvaanTorres]

I had the same issue when using nextjs v13.5.* and it disapeared when I bumped to nextjs v14

[hanafiothman]

same. had the issue in next v13.4. problem gone after bumping to v14

[dejan-crocoder]

What node versions y'all using ?
I got this error when i moved from node@18.17.1 to node@18.18.2

next@13.4.19
react@18.2.0
react-dom@18.2.0

[SiegeSailor]

I got the error when I have:

next: 14.0.4
node: 18.17.0
npm: 9.6.7

It worked fine with my previous setup:

next: 13.4.5
node: 18.13.0
npm: 8.19.13

[limax84]

Same error with:

next: 14.0.4
node: 20.10.0
npm: 8.19.2

[kirk-admin]

For those who utilizing NextJS alongside react-redux to manage their contexts, I successfully addressed the issue by updating to the latest Redux libraries. This came about after I initially created the project in NextJS 13 and later migrated it to NextJS 14.

"react-redux": "^9.1.1",
"redux-thunk": "^3.1.0",
"@reduxjs/toolkit": "^2.2.3",

You might encounter difficulties during installation as it necessitates the latest version of @types/react as well.

"@types/react": "^18.2.79",