CODEWITHSUNDEEP
javascriptgatsby
Romeo Mihalcea
Romeo Mihalcea

Reputation: 10252

Gatsby build html content is empty

I have a website done in [email protected]. 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.

Upvotes: 10

Views: 4099

Answers (2)

BrunoS
BrunoS

Reputation: 3704

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.

Upvotes: 1

ehrencrona
ehrencrona

Reputation: 6982

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 like Edward 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.

Upvotes: 0

Related Questions