css - Flash of unstyled content in Gatsby when using global style sheet

Question

I am working on a gatsby project where everything is working fine, except for when I load any page of the website as there is a flash of unstyled content for like a second. The issue persists in all the pages and my research on fixing this issue revealed this to be a persisting issue when working with styled-components. My project does not use styled components as there is one global style sheet that is shared across the project as the style sheet is loaded in the gatsby-browser.js.

code in the config below. Can anyone assist me here?

    require('dotenv').config({
    path: `.env.${process.env.NODE_ENV}`
});

module.exports = {
    siteMetadata: {
        title: 'name of site',
        siteUrl: `https://lffff.com`,
        description: `some description.`,
        author: 'name',
        image: 'image link'
    },
    pathPrefix: '/v2',
    plugins: [
        'gatsby-transformer-sharp',
        'gatsby-plugin-react-helmet',
        `gatsby-plugin-sharp`,
        `gatsby-transformer-sharp`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`
            }
        },
        {
            resolve: 'gatsby-source-contentful',
            options: {
                spaceId: process.env.CONTENTFUL_SPACE_ID,
                accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
            }
        },
        {
            resolve: 'gatsby-plugin-react-svg',
            options: {
                rule: {
                    include: /assets/
                }
            }
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `GatsbyJS`,
                short_name: `GatsbyJS`,
                start_url: `/`,
                display: `standalone`,
                icon: 'src/images/5f8e0f3ace9452d1a7fbe65b_LP_Logo_Square.png'
            }
        }
    ]

};

this is what is in gatsby-browser.js

import './src/styles/globalStyles.css';

question from:https://stackoverflow.com/questions/65876405/flash-of-unstyled-content-in-gatsby-when-using-global-style-sheet

Answer 1

You are using prefixed paths at:

pathPrefix: '/v2',

In development (gatsby develop) paths don't need to be prefixed, however, during the build and server process (gatsby build && gatsby server) it's a needed specification

If you are building a path manually, you can use withPrefix helper function that prepends your path prefix in production.

Change your build and serve commands to:

gatsby build --prefix-paths

And:

gatsby serve --prefix-paths

If you are not using the pathPrefix, just remove it from your configuration and keep your commands as at the beginning.