Gatsby 构建 html 内容为空答案

【问题标题】：Gatsby build html content is emptyGatsby 构建 html 内容为空
【发布时间】：2021-05-21 07:21:05
【问题描述】：

我在 Gatsby@2.2.10 建立了一个网站。当我运行 gatsby build 并检查生成的 html 时，对于每个页面，我看到的只是一个空 div：<div id="___gatsby"></div。 html 包含样式表、javascript 文件和运行应用程序所需的一切（顺便说一句）。

即使我curl生产的url，同样的div出现并且完全是空的。我还尝试禁用 javascript，但我得到的只是一个空白页。我的配置没有什么花哨的：

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',
    ],
}

我的gatbsy-node 文件是空的，gatsby-browser 只加载了一个样式表和一个 redux 存储：

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

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

export const wrapRootElement = wrapWithProvider

我应该寻找什么想法？除非由于不存在的 html 代码，Netlify 无法检测到我的表单并处理它们，否则我不会那么担心。

【问题讨论】：

我相信看到空的<div id="___gatsby"></div> 很好。 React 应用程序是动态生成的，并且不存在于静态布局中。那么，您要解决的问题是什么？
Gatsby 是一个静态站点生成器。它应该为搜索引擎输出静态内容。您可以在另一个 Gatby 支持的网站上进行测试：curl https://www.qards.io/a-blog-that-is-100-free-can-serve-any-traffic-and-is-unhackable/ | grep "fully functional website"
您是否尝试按照这些步骤操作？ gatsbyjs.org/docs/debugging-html-builds 真的很难说问题出在哪里。
你能检查我的答案吗？如果它没有帮助，那么请详细说明这个问题。
我会说它是wrapWithProvider 函数。你能分享一下它的样子吗？它包装了根元素，因此您必须返回一个组件，其中包含调用它的参数

标签： javascript gatsby

【解决方案1】：

我在这里搜索 gatsby 构建的“空白页”，我的问题是一个愚蠢的问题，希望它对某人有所帮助。

如果public 文件夹被修改，或者文件被移动，gatsby 将失败。只需删除整个文件夹并重建即可。

【讨论】：

【解决方案2】：

如果无法访问代码，很难说出任何确定的内容，但如果生成的 HTML 文件为空但网站正常工作，那么在服务器端呈现时，您的页面将返回 null 或 undefined 而不是组件，但在客户端返回正确的组件。

The Redux for Gatsby example 和Edward Beazer's blog 之类的教程会告诉您添加与gatsby-browser.js 内容相同的gatsby-ssr.js。难道你有一个gatsby-ssr.js，它定义了一个返回null的wrapRootElement函数？

如果你这样做，那将导致你描述的行为，因为它只在服务器端运行，并且会将每个页面替换为一个空页面。

【讨论】：