Gatsby: Some Content of a sub page is missing on reload only in non-local-environment

[arturhenryy]

Summary

I have this weird issue with my live app that on a certain type of subpage which is created from custom post types in wordpress with a template with the gatsby-node.js that if i reload the page the content of the text is missing. everything else is still there like the headline title also queried from acf or the button below. page is hosted on netlify. the only thing suspicious i could detect was that on page reload the trailing slash is removed from the url. but this also does not really explain why only a certain type of content is missing from the page and not all?? otherwise if i navigate normally to the sub page from the app context everything is fine. locally this error does not occur at all

url to page:
https://www.sacher-gmbh.com

url to jobs overview:
https://www.sacher-gmbh.com/jobs

this is the url to the subpage:
https://www.sacher-gmbh.com/jobs/tragwerkplanung-m-w/

Relevant information

gatsby-node.js

const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);
const webpackLodashPlugin = require("lodash-webpack-plugin");

const DEPLOY_ENV = process.env.DEPLOY_ENV || "lbn_published_production";
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"



/**
 * Generate node edges
 *
 * @param {any} { node, actions, getNode }
 */
exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions;

  if (!Object.prototype.hasOwnProperty.call(node, "meta")) {
    return;
  }

  let deploy;

  if (node.meta[DEPLOY_ENV]) {
    deploy = true;
  } else {
    deploy = false;
  }

  createNodeField({ node, name: "deploy", value: deploy });
};

// Will create pages for Wordpress posts (route : /{slug})

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return new Promise((resolve, reject) => {
    // Query all the pages on your WordPress
    graphql(
      `
        {
          allWordpressPage {
            edges {
              node {
                id
                slug
                status
                template
              }
            }
          }
        }
      `
    )
      .then(result => {
        if (result.errors) {
          console.log(result.errors);
          reject(result.errors);
        }
        // Create those pages with the wp_page.jsx template.

        _.each(result.data.allWordpressPage.edges, edge => {
          createPage({
            path: `/${edge.node.slug}/`,
            component: (() => {
              if (edge.node.wordpress_id === 20) {
                return slash(path.resolve(`./src/pages/about.jsx`));
              }
              if (edge.node.wordpress_id === 67) {
                return slash(path.resolve(`./src/pages/projekte.jsx`));
              }
              if (edge.node.wordpress_id === 23) {
                return slash(path.resolve(`./src/pages/jobs.jsx`));
              }
              return slash(path.resolve(`./src/templates/wp_page.jsx`));
            })(),
            context: {
              id: edge.node.id
            }
          });
        });
      })
      // Now, querying all Journal Posts (DEFAULT WP POST)
      .then(() => {
        graphql(
          `
            {
              allWordpressPost {
                edges {
                  node {
                    id
                    slug
                    modified
                    categories {
                      name
                    }
                  }
                }
              }
            }
          `
        ).then(result => {
          if (result.errors) {
            console.log(result.errors);
            reject(result.errors);
          }

          const postTemplate = path.resolve(`./src/templates/post/post.jsx`);
          // We want to create a detailed page for each
          // post node. We'll just use the Wordpress Slug for the slug.
          // The Post ID is prefixed with 'POST_'

          const { edges } = result.data.allWordpressPost;

          _.each(edges, (edge, index) => {
            // Create the page for Jounal Posts and add next / prev navigation

            createPage({
              path: `journal/${edge.node.slug}`,
              component: slash(postTemplate),
              context: {
                id: edge.node.id,
                prev: index === 0 ? null : edges[index - 1].node,
                next: index === edges.length - 1 ? null : edges[index + 1].node
              }
            });
          });
          // ==== END POSTS ====

          // Query and create all Job Pages (CUSTOM POST TYPE)
          graphql(`
            {
              allWordpressWpJobs {
                edges {
                  node {
                    id
                    slug
                  }
                }
              }
            }
          `).then(result => {
            if (result.errors) {
              console.log(result.errors);
              reject(result.errors);
            }
            // Create Page pages.
            const jobTemplate = path.resolve("./src/templates/job/job.jsx");
            _.each(result.data.allWordpressWpJobs.edges, edge => {
              createPage({
                path: `/jobs/${edge.node.slug}`,
                component: slash(jobTemplate),
                context: {
                  id: edge.node.id,
                  name: `/${edge.node.slug}/i`
                }
              });
            });
          });
          // ==== END JOB POSTS ====

          // Query and create all Project Pages (CUSTOM POST TYPE)
          graphql(`
            {
              allWordpressWpProjects {
                edges {
                  node {
                    id
                    slug
                  }
                }
              }
            }
          `).then(result => {
            if (result.errors) {
              console.log(result.errors);
              reject(result.errors);
            }

            // Create Project Pages.
            const projects = result.data.allWordpressWpProjects.edges;
            const projectTemplate = path.resolve(
              "./src/templates/project/project.jsx"
            );

            _.each(projects, (edge, index) => {
              createPage({
                path: `/projekte/${edge.node.slug}`,
                component: slash(projectTemplate),
                context: {
                  id: edge.node.id,
                  name: `/${edge.node.slug}/i`,
                  prev: index === 0 ? null : projects[index - 1].node,
                  next:
                    index === projects.length - 1
                      ? null
                      : projects[index + 1].node
                }
              });
            });
          });
        });
      });
    // === END TAGS ===
    resolve();
  });
};

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === "build-javascript") {
    actions.setWebpackConfig({
      plugins: [webpackLodashPlugin]
    });
  }
};

Template of the jobs single

```

import React from "react";
import { graphql } from "gatsby";
import Helmet from "react-helmet";
import MainLayout from "../../components/Layout/layout";
import TopNavigation from "../../components/Layout/Navigation/Navigation";
import Button from "../../components/Accessories/Button/Button";
import config from "../../../data/SiteConfig";
import "./job.scss";

export default class JobsTemplate extends React.Component {
render() {
const { location, data } = this.props;
const { acf } = data.wordpressWpJobs;
const { optionsPage } = data;

return (
  <MainLayout location={location}>
    <Helmet>
      <title>{`${acf.jobs_title} | ${config.siteTitle}`}</title>
    </Helmet>
    <TopNavigation>
      <Button
        className="btn-back"
        isOnlyIcon
        icon="arrow"
        orientation="left"
        internalLink="/jobs/"
        color="gray"
      />
    </TopNavigation>
    <section className="jobs-single-section">
      <h1
        className="col-62-pct text-m"
        dangerouslySetInnerHTML={{ __html: acf.jobs_title }}
      />
      <p
        className="col-62-pct"
        dangerouslySetInnerHTML={{ __html: acf.jobs_description }}
      />
      <Button
        color="gray"
        icon="chevron"
        orientation="right"
        externalLink={"mailto:" + optionsPage.edges[0].node.options.footer_apply_email}
      >
        Hier bewerben
      </Button>
    </section>
  </MainLayout>
);

}
}

/* eslint no-undef: "off" */
export const pageQuery = graphql query singleJob($id: String!) { wordpressWpJobs(id: { eq: $id }) { id slug acf { jobs_title jobs_description } } optionsPage: allWordpressAcfOptions { edges { node { options { footer_apply_email } } } } } ;

Environment (if relevant)

System:
OS: macOS High Sierra 10.13.2
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.98
Firefox: 64.0
Safari: 11.0.2
npmPackages:
gatsby: ^2.0.63 => 2.0.63
gatsby-image: ^2.0.22 => 2.0.22
gatsby-link: ^2.0.7 => 2.0.7
gatsby-plugin-catch-links: ^2.0.9 => 2.0.9
gatsby-plugin-feed: ^2.0.11 => 2.0.11
gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
gatsby-plugin-manifest: ^2.0.11 => 2.0.11
gatsby-plugin-netlify: ^2.0.6 => 2.0.6
gatsby-plugin-nprogress: ^2.0.7 => 2.0.7
gatsby-plugin-offline: ^2.0.18 => 2.0.18
gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7
gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
gatsby-plugin-sass: ^2.0.7 => 2.0.7
gatsby-plugin-sharp: ^2.0.14 => 2.0.14
gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
gatsby-plugin-twitter: ^2.0.8 => 2.0.8
gatsby-remark-autolink-headers: ^2.0.12 => 2.0.12
gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.7
gatsby-remark-images: ^3.0.1 => 3.0.1
gatsby-remark-prismjs: ^3.1.4 => 3.1.4
gatsby-remark-responsive-iframe: ^2.0.7 => 2.0.7
gatsby-source-filesystem: ^2.0.11 => 2.0.11
gatsby-source-wordpress: ^3.0.19 => 3.0.19
gatsby-transformer-remark: ^2.1.15 => 2.1.15
gatsby-transformer-sharp: ^2.1.9 => 2.1.9
npmGlobalPackages:
gatsby-cli: 2.4.5

[arnriu]

<p> tag should not contain <p> tags. It can only contain inline elements.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Problem is: on first load from your server, it's the ssr version that is served. If you read your sources, you will see p in p. Your browser will then auto-close the parent p and its children p become its siblings. Then your react comes to life, takes hands on your DOM and clean the siblings p that it's not aware of and are not supposed to be here. Here is your empty p.

On subsequent navigations, your react will force add p inside p. Some browser will break, some will just accept their fate and accept p in p 'quirks mode like' when added with javascript.

[arturhenryy]

@arnriu thanks for the help here. that solved it.