Gatsby: wrapPageElement doesn't seem to work as expected in V2

[anthonysapp]

Description

I use wrapPageElement API hook as described in the docs to have persistent page elements.

Steps to reproduce

My gatsby-browser.js looks like this:

const React = require("react");
const Layout = require("components/Layout").default;

exports.wrapPageElement = ({ element, props }) => (
  <Layout {...props}>{element}</Layout>
);

Layout.js extends PureComponent and implements a PoseGroup in its render method, while keeping the main navigation and footer persistent.

Expected result

Page content mounts / unmounts as a child of the PoseGroup, main navigation and footer don't get re-mounted on route changes.

Actual result

Layout component itself still re-mounts on every route change.

Environment

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
Yarn: 1.9.4 - ~/.nvm/versions/node/v10.6.0/bin/yarn
npm: 6.1.0 - ~/.nvm/versions/node/v10.6.0/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 62.0
npmPackages:
gatsby: latest => 2.0.1
gatsby-image: latest => 2.0.5
gatsby-plugin-catch-links: latest => 2.0.2
gatsby-plugin-create-client-paths: latest => 2.0.0
gatsby-plugin-google-analytics: latest => 2.0.5
gatsby-plugin-netlify: latest => 2.0.0
gatsby-plugin-netlify-cache: latest => 0.1.0
gatsby-plugin-react-helmet: latest => 3.0.0
gatsby-plugin-sass: latest => 2.0.1
gatsby-plugin-sharp: latest => 2.0.5
gatsby-plugin-sitemap: latest => 2.0.1
gatsby-source-filesystem: latest => 2.0.1
gatsby-source-prismic-campjefferson: ^1.0.7 => 1.0.7
gatsby-transformer-sharp: latest => 2.1.1
npmGlobalPackages:
gatsby-cli: 2.4.0

[spectras]

Same issue here. It looks like a regression:

• It was working fine with 2.0.0-rc0
• I upgraded to 2.0.0 and it no longer works.

Same symptoms as anthonysapp.

[stefanprobst]

I think this is because <PageRenderer /> since #8218 has a key.

[spectras]

I just tried to revert the patch in #8218 on my local copy, removing the key and confirm that fixes the issue.
Good catch @stefanprobst

[greglobinski]

Same issue

It was working fine with 2.0.0-rc0
I upgraded to 2.0.0 and it no longer works.

[anthonysapp]

@spectras is this easy to do? I assume since #8218 was part of a larger issue there is some work involved in fixing it.

[spectras]

@anthonysapp reverting that patch fixes the issue with wrapPageElement. Yeah it's easy, it only changed 3 lines.

However, I guess the other issue should be back then. As my own project was not affected that's fine as a workaround for me at the moment.

[anthonysapp]

Cool, thanks all. Should we leave this issue open as it's been marked for review?

[spectras]

I guess so. The workaround does not fix the issue, as people who were affected by the initial problem cannot use it.

[NathanLawrence]

Major +1 to this one here as well.

Since it's basically a very thin wrapper around the same wrapPageElement API, this also affects gatsby-plugin-layout, so there's really no workaround outside diverting back to rc.25 until the PR goes through review.

[KyleAMathews]

@pieh

[greglobinski]

+1

[pieh]

PR fixing it is already merged, will be publishing new release soon

[pieh]

Should be fixed in [email protected]

[greglobinski]

Thank you @pieh