程序员经验分享-hwhale

Gatsby 未生成正确的静态 HTML 文件

2024-04-06

我正在开发一个基于盖茨比的网站，到目前为止该网站的开发进展顺利。但在构建生产时遇到了一个问题，即我们在各个页面索引文件中没有获得任何静态 html，相反，Gatsby 似乎将尝试从 javascript 注入页面，这与我们的预期相反。

我看到了一些与 Gatsby 离线插件相关的帖子，我已将其禁用，但这并没有解决问题。我们的页面不包含静态 html 输出，并且我期望 React-helmet 注入的元内容也不存在。

是否有关于如何调试构建以查看可能重置静态输出并将其替换为动态生成的 Gatsby 引导代码的建议。

该网站使用的插件有：

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

预先感谢您的任何指点


有同样的问题。

看来 PersistGate 破坏了 ssr。由于 ssr 是在构建期间完成的，并且我们在那里不需要它，因此我们可以检查我们的环境。

改变wrap-with-provider.js从 1. 到 2. 成功了

import React from "react"
import { Provider } from "react-redux"
import { PersistGate } from 'redux-persist/integration/react'

import {store, persistor} from "./src/redux/store"

1:

export default ({ element }) => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      {element}
    </PersistGate>
  </Provider>
)

2:

export default ({ element }) => {
  if (typeof window === "undefined") {
    return (
      <Provider store={store}>
        {element}
      </Provider>
    )
  }
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {element}
      </PersistGate>
    </Provider>
  )
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

gatsby

Gatsby 未生成正确的静态 HTML 文件 的相关文章

随机推荐

  • 页面加载一段时间后执行JS函数

    I have javascript函数 并且应该在页面加载完成 3 秒后调用 我知道关于setIntervel但它会在一定时间间隔后重复执行 我希望它执行一次 有可能吗 The onload https developer mozilla

  • Ruby 中的 % 运算符在 N % 2 中起什么作用？

    if counter 2 1我正在尝试解码这一行 这是一个 Rails 项目 我正在尝试弄清楚 在这个 if 语句中执行 is the modulo http en wikipedia org wiki Modulo operator操作员

  • 在 Runtime.getRuntime().exec() 中出现错误：/bin/bash：没有这样的文件或目录[重复]

    这个问题在这里已经有答案了 我正在尝试从 java 代码执行以下操作 String cmd bin bash netstat nr grep 0 0 0 0 awk print 2 Process process Runtime getRu

  • 为什么用字母L来表示宽字符串？

    例如 wchar t str L hello 为什么是 L 而不是其他字母 MSDN 声称它代表字符串Literal 即输入的字符串不应被翻译成其他任何内容

  • 如何找到物体的中心？

    二值化后我有黑白图像 之后我得到了一个形状不规则的物体 该图片的链接如下 我怎样才能把这个物体刻在圆圈上 或者我怎样才能找到这个物体的 中心 您可以找到重心使用一个简单的公式计算像素的值 该公式是 x 坐标之和除以点数 以及 y 坐标之和除

  • Python 中的私有方法

    我想在我的类中有一个函数 我将仅在此类的方法内部使用该函数 我不会在这些方法的实现之外调用它 在 C 中 我将使用在类的私有部分中声明的方法 在Python中实现这样的功能的最佳方法是什么 我正在考虑在这种情况下使用静态装饰器 我可以使用没

  • 如何使用 Apache POI 在 Word 文档中插入图像？

    我有这个代码 public class ImageAttachmentInDocument param args throws IOException throws InvalidFormatException public static

  • eclipse插件编程时出现“Workbench尚未创建”错误

    随着我的 eclipse 插件启动 我得到了Root exception java lang IllegalStateException Workbench has not been created yet error 而且它似乎会导致产生

  • PHP/Symfony2 表单复选框字段

    Orm My SampleBundle Entity Subject type entity id id type integer generator strategy AUTO fields motion type smallint un

  • 理解含义的算法[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我想知道是否有任何特定的算法可以遵循

  • Vue：选择下拉菜单在更改值时清除其他输入

    我有一个带有输入值的表单 当我选择带有 v model 的选项并更改下拉值时 之前字段的输入将被清除 我制作了一个简单的代码笔来演示这一点 一段时间以来 这一直是我的痛点 但现在它开始干扰客户体验 所以我想看看为什么会发生这种情况 http

  • 带通配符的 FTP 目录部分列表

    首先我问 ftp 目录列表超时 大量子目录 https stackoverflow com questions 9230485 ftp directory listing timeout huge number of subdirs 我得到

  • 在 JFrame 中组织多个 JPanel 的好方法是什么？

    我想做的是在框架内组织五个独立的 JPanel 输出应如下所示 顶部将有一个面板 顶部面板正下方的两个面板垂直分割空间 然后另外两个面板水平分割剩余空间 我无法弄清楚如何组织如上所述的面板 我认为这是因为我不知道正确的语法 因此 非常感谢任

  • 引用在嵌套结构中的生存时间不够长

    我正在创建一系列数据结构 其中包含对较低级别结构的可变引用 我一直很愉快地与A B and C下面但我尝试添加一个新层D A B C D实际上是用于协议解码的状态机的状态 但我在这里删除了所有这些 struct A fn init A gt

  • Go 模块在 VSCode 中导入问题（“无法在任何 [...] 中找到包 [...]”）

    我遇到了可能是 Gopls 语言服务器问题 在 VSCode 中使用带有 Go 扩展的 Go 模块时 我的所有外部包导入语句都被标记为不正确 这正是我到目前为止所做的 在我的 GOPATH src github com Kozie1337

  • sbt：选择运行的主类

    我的应用程序中有大约 6 个主要类 但我通常只使用其中一个 所以我想通过 sbt 自动运行它 sbt 使得可以在 build sbt 中定义两个键 Run Key val selectMainClass TaskKey Option Str

  • 无法检索访问令牌 linkedin api

    我正在申请connect with linkedin 我正在关注分步指南 https code google com p simple linkedinphp wiki QuickStart 为了验证用户身份 我寻求了帮助this http

  • 如何绘制具有不同 colspan 的四个子图？

    我尝试使用四张图像来拟合matplotlib pyplot像下面这样 plot1 plot2 plot3 plot4 我发现的大多数例子都涵盖了如下三个图 ax1 plt subplot 221 ax2 plt subplot 222 ax

  • 当我将 targetSDK 设置为 API 30 后，我的 Android 应用程序无法正常工作；我如何找出原因？

    根据Google https developer android com distribute best practices develop target sdk 从 2021 年 8 月开始 所有新的 Google Play 应用程序除了

  • Gatsby 未生成正确的静态 HTML 文件

    我正在开发一个基于盖茨比的网站 到目前为止该网站的开发进展顺利 但在构建生产时遇到了一个问题 即我们在各个页面索引文件中没有获得任何静态 html 相反 Gatsby 似乎将尝试从 javascript 注入页面 这与我们的预期相反 我看到

热门标签