Layout is broken for client routes in production build

Description

Hello. I have an application with client routes. On my page there main banner and tabs component. Each tab should have own url.

URL’s:

1 tab - /chastnim-licam/krediti/kredit-na-lyubye-celi/ (root of the page) 2 tab - /chastnim-licam/krediti/kredit-na-lyubye-celi/tarify-i-documenty/ 3 tab - /chastnim-licam/krediti/kredit-na-lyubye-celi/voprosy-i-otvety/

I Added onCreatePage method to gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/chastnim-licam\/krediti\/kredit-na-lyubye-celi/)) {
    page.matchPath = "/chastnim-licam/krediti/kredit-na-lyubye-celi/*"
  }
  createPage(page)
} 

and use @reach/router for managing tabs. For styling components I use styled-components. In develop mode everything works fine. But when i build app in production mode styled components broken on every tab except first. But when I click at other tab and go back on previous everything is fine.

tabs component

import React, { useEffect, useState } from 'react'
import { Tab, Tabs, TabsBar } from '@mtsbank/ui-kit'
import { Router } from '@reach/router'
import { navigate } from 'gatsby-link'

const tabsMapping = {
  about: '',
  tariffs: 'tarify-i-documenty',
  faq: 'voprosy-i-otvety',
}

export const TabsTemplate = ({ aboutComponent, tariffsComponent, faqComponent, data, basePath }) => {
  const [tab, setTab] = useState('')
  const AboutComponent = aboutComponent
  const TariffsComponent = tariffsComponent
  const FaqComponent = faqComponent

  const handleChange = (event, tab) => {
    setTab(tab)
    const slugWithSlash = tab === 'about' ? tabsMapping[tab] : `${tabsMapping[tab]}/`
    navigate(basePath + slugWithSlash)
  }

  useEffect(() => {
    const paths = window.location.pathname.split('/')
    const slug = paths.pop() || paths.pop()
    switch(slug) {
      case tabsMapping.faq:
        setTab('faq')
        break
      case tabsMapping.payments:
        setTab('payments')
        break
      case tabsMapping.tariffs:
        setTab('tariffs')
        break
      default:
        setTab('about')
    }
  })

  return (
    <>
      <Tabs tab={tab}>
        <TabsBar onChange={handleChange} withDivider>
          <Tab tab="about" label="О кредите" />
          <Tab tab="tariffs" label="Тарифы и документы" />
          <Tab tab="faq" label="Вопросы и ответы" />
        </TabsBar>
      </Tabs>

      <Router basepath={basePath}>
        <AboutComponent path={`/${tabsMapping.about}`} data={data} />
        <TariffsComponent path={`/${tabsMapping.tariffs}`} data={data} />
        <FaqComponent path={`/${tabsMapping.faq}`} data={data} />
      </Router>
    </>
  )
}

Steps to reproduce

build app with production mode

Expected result

styled components rendering correctly.

Actual result

styled components rendering broken.

Environment

 System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.163
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.15 => 2.20.15
    gatsby-alias-imports: 1.0.4 => 1.0.4
    gatsby-cli: ^2.11.5 => 2.11.5
    gatsby-link: 2.3.2 => 2.3.2
    gatsby-plugin-google-tagmanager: 2.2.1 => 2.2.1
    gatsby-plugin-linaria: 2.0.0 => 2.0.0
    gatsby-plugin-react-helmet: 3.2.1 => 3.2.1
    gatsby-plugin-styled-components: 3.2.1 => 3.2.1
    gatsby-source-filesystem: 2.2.2 => 2.2.2
    gatsby-transformer-json: 2.3.1 => 2.3.1

package.json

{
  "name": "portal-frontend-loans",
  "private": true,
  "description": "Приложение «Кредиты»",
  "author": "MTS Bank frontend team",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "@mtsbank/common": "5.9.7",
    "@mtsbank/ui-kit": "6.8.0",
    "gatsby": "2.20.15",
    "gatsby-alias-imports": "1.0.4",
    "gatsby-link": "2.3.2",
    "gatsby-plugin-google-tagmanager": "2.2.1",
    "gatsby-plugin-linaria": "2.0.0",
    "gatsby-plugin-react-helmet": "3.2.1",
    "gatsby-plugin-styled-components": "3.2.1",
    "gatsby-source-filesystem": "2.2.2",
    "gatsby-transformer-json": "2.3.1",
    "isomorphic-fetch": "2.2.1",
    "nanoid": "3.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-helmet": "5.2.1",
    "styled-components": "5.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-preset-gatsby": "^0.3.1",
    "gatsby-cli": "^2.11.5",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^4.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-mdx": "^1.6.8",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "http-proxy-middleware": "^1.0.3",
    "prettier": "^1.19.1",
    "prop-types": "^15.7.2",
    "stylelint": "^13.0.0",
    "stylelint-config-prettier": "^8.0.1",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-order": "^3.1.1"
  },
  "repository": {
    "type": "git",
    "url": "https://qcm-git.mbrd.ru/site/portal-frontend-loans.git"
  }
}

gatsby-config.js

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = {
  assetPrefix: `/${process.env.npm_package_name}`,
  plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-transformer-json',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-alias-imports',
      options: {
        aliases: {
          api: 'src/api',
          components: 'src/components',
          templates: 'src/templates',
          // TODO перенести в GraphQL
          mocks: 'src/mocks',
          // TODO Отрефачить в TypeScript
          utils: 'src/utils'
        }
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `./src/data/`,
      },
    },
    {
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: 'GTM-MR24MVG',
        includeInDevelopment: false,
        defaultDataLayer: { platform: 'gatsby' },
      },
    },
  ]
}

[JustFly1984]

@aivasiuta There is mismatch between code rendered on server side, and rehydrated at runtime. Please read: https://joshwcomeau.com/react/the-perils-of-rehydration/ If it solves your issue please give your feedback

[danabrit]

Closing due to no reproduction provided.