Gatsby: Wrong classes on dynamic pages

[razvan-soare]

Description

I want to create some dynamic pages (user only pages) for an online store. My problems occurs when im going directly on the product page.

I used this in gatsby node:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;
  if (page.path.match(/^\/store/)) {
    page.matchPath = '/store/*';
    createPage(page);
  }
};

Then in store page i have a little router that will change my components from test1 to test2 depending on the path.

<Router>
          <Test1 path="/store" />
          <Test2 path="/store/:item" />
</Router>

If i go /store then click a link to redirect me to /store/product-name everything works fine (inspect element all classes are there with wow test 1. The problem is when im entering the product page directly -> /store/product-name. I will see the product 2 content but the classes will all be from test1. (again check inspect element)

The problem happens only on server not locally..

Steps to reproduce

Here i made a little repo with the code
git clone https://bitbucket.org/soare-razvan/gatsby-test
Here is the live version
http://gatsby-test.thunderboard.eu/store

Expected result

Entering product page will have the right classes

Actual result

Product page will have store component classes.

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-2415M CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.53 => 2.0.53
    gatsby-image: ^2.0.20 => 2.0.20
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9
    gatsby-plugin-offline: ^2.0.16 => 2.0.16
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
    gatsby-plugin-sharp: ^2.0.14 => 2.0.14
    gatsby-source-filesystem: ^2.0.8 => 2.0.8
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8
  npmGlobalPackages:
    gatsby-cli: 2.4.5

[sidharthachatterjee]

@razvan-soare I've been able to reproduce this

• When hitting /store directly in the browser, the static rendered markup is being returned (which looks correct)
• When navigating to /store/product-name in the client side, everything is fine as well
• When hitting /store/product-name directly, since there is no server rendered page for that particular route, 404.html is returned and rendered by the browser

Since the 404 component includes the Layout component and the store component does not, React is unable to reconcile those differences correctly and that is causing the leftover styling from 404.js

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches.

https://reactjs.org/docs/react-dom.html#hydrate

A simple fix for this would be to include Layout in store.js as well or remove any styles that you don't want from it

[sidharthachatterjee]

@razvan-soare Closing this for now but please feel free to reopen if the above doesn't fix your issue!

[blainekasten]

25729