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

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';

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.