Gatsby build html content is empty

Question

I have a website done in Gatsby@2.2.10. When I run gatsby build and inspect the generated html, for every page, all I see is an empty div: <div id="___gatsby"></div . The html contains the stylesheets, javascript files and everything needed to run the app (which works by the way).

Even if I curl the production url, the same div appears and is completely empty. I also tried with javascript disabled and all I get is a blank page. My config contains nothing fancy:

module.exports = {
    siteMetadata: {
        title      : `MyApp`,
        description: ``,
        author     : ``,
    },
    plugins     : [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/static/images`,
            },
        },
        {
            resolve: `gatsby-plugin-less`,
            options: {
                javascriptEnabled: true,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sass`,
        `gatsby-plugin-sharp`,
        `gatsby-plugin-typescript`,
        `gatsby-plugin-styled-components`,
        {
            resolve: `gatsby-plugin-google-fonts`,
            options: {
                fonts: [
                    `Montserrat\:200,400,600,800`,
                ],
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name            : `MyApp.com`,
                short_name      : `MyApp`,
                start_url       : `/`,
                background_color: `#4DECDB`,
                theme_color     : `#2F57E4`,
                display         : `minimal-ui`,
                icon            : `src/static/images/logo.png`,
            },
        },
        `gatsby-plugin-offline`,
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                // replace "UA-XXXXXXXXX-X" with your own Tracking ID
                trackingId: 'UA-111111111-16',
            },
        },
        //  last
        'gatsby-plugin-netlify',
    ],
}

My gatbsy-node file is empty and gatsby-browser just loads a stylesheet and a redux store:

import wrapWithProvider from './wrap-wit-provider'

import './src/components/layout/styles.less'

export const wrapRootElement = wrapWithProvider

Any ideas what I should look for? I wouldn't be that concerned unless Netlify's inability to detect my forms and process them due to non-existing html code.

Answer 1

Short answer . Use gatsby build and gatsby serve to see the generated content.

---

Gatsby is a static generator. It means that it is generating the webapp which doesn't require any backend.

All pages are generated during the build. It helps the app to be amazingly fast.

According to Gatsbyjs.org:

Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

BTW one of the option to deploy the app could be Static web site on Azure Blob storage. It can give you CDN out of the box. It's quite cheap and fast.

Gatsby CLI is a command-line tool to develop, build and run Gatsby apps.

https://www.gatsbyjs.org/docs/gatsby-cli/

Docs say about 3 basic commands:

1. gatsby develop starts the development server. It's useful during development time.
2. gatsby build generates the static output that is ready to be deployed. It takes more than one minute to generate an empty website. That's why gatsby develop is very useful for development.
3. gatsby serve serves generated static output.

Therefore, to check static output you should run gatsby serve (after gatsby build ) instead of gatsby develop .

gatsby develop

Compiled in 13 seconds and hot updated applied in 246 milliseconds .

gatsby build

Compiled in 74 seconds.

Answer 2

It's hard to say anything definitive without having access to the code, but if the generated HTML files are empty but the site works, then your page is returning null or undefined instead of a component when server side rendering, but returning the correct component on the client side.

The Redux for Gatsby example and tutorials likeEdward Beazer's blog will tell you to add a gatsby-ssr.js with the same content as gatsby-browser.js . Could it be that you have a gatsby-ssr.js and it defines a wrapRootElement function that returns null ?

If you do, that will cause the behavior you describe, since it's only run on the server side and would replace every page with an empty page.

Answer 3

I got here searching for "blank page" on gatsby build, the problem in my case was a silly one, hope it helps someone.

If public folder has been modified, or file moved, gatsby will fail. Just deleting entire folder and rebuilding worked fine.