Gatsby losing/disappearing CSS on page refresh?

user_9378367 0
Viewed 2651

I have a Gatsby static site hosted at http://orangecountycovid19.com and everything works good in production and is able to refresh. Even in production I can refresh with no problems, but when I click the link to a new page (https://orangecountycovid19.com/TestingLocations/), it loads perfectly. This issue is when I refresh the new link. All of the css goes away.

What is happening here?

index.js

// Imports: Dependencies
import React from 'react';
import { Helmet } from 'react-helmet';

// Imports: Pages
import Home from '../pages/Home';

// Imports: CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/MainTitle.css';
import '../css/MetricsTotals.css';
import '../css/VirusFacts.css';
import '../css/PieCharts.css';
import '../css/Legend.css';
import '../css/CasesVsDeaths.css';
import '../css/PeopleTestedVsTestCapacity.css';
import '../css/DataSource.css';
import '../css/Footer.css';
import '../css/404.css';
import '../css/TestingLocations.css';
import '../css/TestingLocationCard.css';
import '../css/AppointmentButton.css';

// Index
export default () => {
  return (
    <div>
      <Helmet>
        <meta charSet="utf-8" />
        <title>COVID-19</title>
        <html lang={'en'} />
        <link rel="canonical" href="https://orangecountycovid19.com" />
        <meta name="description" content={'Orange County, CA COVID-19 Tracker'} />
      </Helmet>

      <Home/>
    </div>
  );
};

Package.json

{
  "name": "orange-county-covid-19-tracker",
  "private": true,
  "description": "Orange County, CA COVID-19 Tracker",
  "version": "0.1.0",
  "author": "Jeff Lewis",
  "dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "britecharts-react": "^0.5.3",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^0.7.0",
    "fs-extra": "^8.1.0",
    "gatsby": "^2.19.45",
    "gatsby-plugin-google-analytics": "^2.2.1",
    "gatsby-plugin-manifest": "^2.2.48",
    "gatsby-plugin-offline": "^3.0.41",
    "gatsby-plugin-react-helmet": "^3.1.24",
    "prop-types": "^15.7.2",
    "puppeteer": "^2.1.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "covid-19",
    "coronavirus",
    "data",
    "orange county",
    "california"
  ],
  "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"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

gatsby-config

// Gatsby Config
module.exports = {
  siteMetadata: {
    title: 'Orange County COVID-19 Tracker',
    description: 'Orange County COVID-19 Tracker',
    author: 'Jeff Lewis',
  },
  pathPrefix: '/orange-county-covid-19-tracker',
  plugins:[
    // React Helmet
    'gatsby-plugin-react-helmet',
  ],
};
gatsby reactjs css javascript
1 Answers

Issue

After looking at your site's html, the issue is the template of your new page, that does not have the style tag.

Explanation

Your homepage has <style data-href="/styles.7a35604e63a292c1e7f0.css">, so it loads perfectly when you visit the homepage and, from there, everything is a Single-page Application.

This is not present in your child page, that does not have any mention to the style tag in its head tag.

Checklist

  • Do you use a different template for child pages?

  • Is there any conditional applying to this tag?

  • Are you importing scss/css files in your template / layout / components? Something like import './style.scss';.

Working example

I have a site running with Gatsby, with Helmet too. This is my src/layouts/index.jsx file:

import React from 'react';
import Helmet from 'react-helmet';
import '../assets/scss/init.scss';

class Layout extends React.Component {
  render() {
    const { children } = this.props;
    const { title, subtitle } = this.props.data.site.siteMetadata;

    return (
      <div className="layout">
        <Helmet defaultTitle={`${title} | ${subtitle}`} />
        {children()}
      </div>
    );
  }
}

export default Layout;

export const layoutQuery = graphql`
  query LayoutQuery {
    site {
      siteMetadata {
        title
        subtitle
        description
      }
    }
  }
`;
user_1969310
Related