Gatsby not generating correct static HTML files

问题

I am working on a Gatsby based website which is so far going well in development. Running into an issue though when building for production whereby we do not get any static html in the various page index files and instead it looks like Gatsby is going to attempt to inject the page from javascript which is contra to our expectation.

I have seen some posts related to the Gatsby offline plugin which I have disabled but this has not resolved the issue. Our pages contain no static html output and the meta content I would expect react-helmet to inject is also not present.

Are there any recommendations on how to debug the build to see what may be resetting the static output and replacing it with dynamically generated Gatsby bootstrap code.

Plugins being used for the site are:

 plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: 'data',
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-styled-components`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    //`gatsby-plugin-offline`,
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
        pages: path.join(__dirname, 'src/pages'),
        images: path.join(__dirname, 'src/images'),
      },
    },
    `gatsby-plugin-transition-link`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        head: true,
      },
    },
  ]

Thanks in advance for any pointers

回答1:

I managed to track the issue down to a conflict between Redux (redux-persist) and Gatsby SSR - specifically related to the use of a PersistGate element. The following is a pretty common pattern where you have the following in gatsby-browser and gatsby-ssr

export { default as wrapRootElement } from 'src/store/ReduxWrapper';

Which ReduxWrapper would contain the following:

export default ({ element }) => (
  <Provider store={store}>
    <PersistGate loading={<h2>Loading...</h2>} persistor={persistor}>
      {element}
    </PersistGate>
  </Provider>
);

This unfortunately breaks SSR which can be resolved by creating a different ReduxWrapper that does not depend on . Assuming this is called ReduxSSRWrapper then gatsby-ssr will be changed to:

export { default as wrapRootElement } from 'src/store/ReduxSSRWrapper';

and ReduxSSRWrapper will contain the following which is basically a removal of PersistGate:

export default ({ element }) => (
  <Provider store={store}>
    {element}
  </Provider>
);

来源：https://stackoverflow.com/questions/58238525/gatsby-not-generating-correct-static-html-files

标签

reactjs

gatsby