Next.js: <AppTree /> is incorrect

Created on 7 Nov 2019 · 11Comments · Source: vercel/next.js

Bug report

Describe the bug

AppTree is sometimes incorrect in this code:

import BaseApp from "next/app";
import { renderToStaticMarkup } from "react-dom/server";

export default class App extends BaseApp {
  static async getInitialProps(appCtx) {
    const initialProps: any = await BaseApp.getInitialProps(appCtx);

    // Not working
    const { AppTree } = appCtx;
    console.log("Wrong", renderToStaticMarkup(<AppTree {...initialProps} />));

    return initialProps;
  }

  render() {
    return <BaseApp {...this.props} />;
  }
}

Therefore, all the "with-apollo" examples don't work and the "next-with-apollo" package too.

To Reproduce

Open this Code Sand Box : https://codesandbox.io/s/nextjs-apptree-bug-0v2tl
Click on the "About page" link then on the "Home page" link
Click on the console tab. You should see this and observe the current <AppTree /> is sometimes incorrect:

Current <AppTree />: <a href="/about">About page</a> 
Correct <AppTree />: <a href="/">Home page</a> 

Current <AppTree />: <a href="/about">About page</a> 
Correct <AppTree />: <a href="/about">About page</a> 

Current <AppTree />: <a href="/about">About page</a> 
Correct <AppTree />: <a href="/">Home page</a>

Current workaround

I found a simple way to get the correct AppTree by looking at Next.js source code:

import BaseApp from "next/app";
import { renderToStaticMarkup } from "react-dom/server";

export default class App extends BaseApp {
  static async getInitialProps(appCtx) {
    const initialProps: any = await BaseApp.getInitialProps(appCtx);

    // Working
    const { Component, err, router } = appCtx;
    console.log(
      "Good",
      renderToStaticMarkup(
        <App {...{ Component, err, router }} {...initialProps} />
      )
    );

    return initialProps;
  }

  render() {
    return <BaseApp {...this.props} />;
  }
}

good first issue bug needs investigation

Source

lcswillems

👍11

Most helpful comment

Experiencing the same issue, it might be some combination of AppTree and @apollo/react-ssr v3

FlorinSenoner on 17 Nov 2019

👍7

All 11 comments

The workaround doesn't fully work because the app is not wrapped (in the Next.js source code, app is passed to a wrapApp function that adds router, etc...).

Hence, useRouter returns null.

lcswillems on 7 Nov 2019

@lcswillems It seems i have a similar problem on https://github.com/zeit/next.js/issues/9350