Question

在我开发盖茨比项目时遇到了一个问题。使用Gatsby Develop，一切都可以正常运行，但是最近开始了构建过程并部署了网站。

在浏览器上启动网站后，出现以下错误。关于我的页面目录中的创新文件：

错误：找不到/ innovation /的页面资源。不渲染React

无法加载资源：服务器响应状态为404（）（page-data.json）

我以为我可能使用的组件或库破坏了产品页面。我将源代码还原为模板，如下所示：

import React from "react";
import { Link } from "gatsby";

import Layout from "../components/layout";
import SEO from "../components/seo";

const InnovationPage = () => (
  <Layout>
    <div style={{ backgroundColor: "#140E55" }}>
      <SEO title="Innovation" />
      <h1>Hi from the innovation page</h1>
      <p>Welcome to innovation</p>
      <Link to="/">Go back to the homepage</Link>
    </div>
  </Layout>
);

export default InnovationPage;

不幸的是，问题仍然存在。生无可恋。该视图导致无法再进行交互的阻塞。

我的gatsby-config.js文件

module.exports = {
  siteMetadata: {
    title: `Lorem Ipsum`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    twitter: "https://twitter.com/home",
    linkedin: "https://www.linkedin.com/feed/",
    xing: "https://www.xing.com",
    youtube: "https://www.youtube.com",
  },
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      resolve: "gatsby-plugin-matomo",
      options: {
        siteId: "1",
        matomoUrl: "https://analytics.safia.tech",
        siteUrl: "https://safia.tech",
      },
    },
    `gatsby-plugin-smoothscroll`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-no-index`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-postcss`,
    {
      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/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
};

Answer 1

在当前版本的盖茨比中似乎存在错误。尝试将软件包降级到最新的稳定工作版本：

"gatsby": "2.20.36",
"gatsby-cli": "^2.12.54",
"gatsby-image": "^2.4.13",
"gatsby-plugin-exclude": "^1.0.2",
"gatsby-plugin-google-analytics": "^2.3.11",
"gatsby-plugin-manifest": "^2.4.18",
"gatsby-plugin-offline": "^3.2.17",
"gatsby-plugin-react-helmet": "^3.3.10",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-resolve-src": "^2.1.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.19",
"gatsby-plugin-use-query-params": "^1.0.1",
"gatsby-source-filesystem": "^2.3.19",
"gatsby-source-graphql": "^2.6.2",
"gatsby-transformer-sharp": "^2.5.11",

如此GitHub thread所示。

删除package-lock.json，node_modules和缓存文件夹（.cache），然后将其修复为可用的版本。

Answer 2

尝试清除浏览历史

我不知道为什么，但清除我的浏览历史记录解决了这个问题。在我这样做之前，我注意到浏览器图标是我昨天一直在研究的一个单独的 gatsby 项目的图标，所以可能发生了一些事情，你的浏览器与单独的 gatsby 项目的细节不匹配

找不到Gatsby错误页面资源。不渲染React。在盖茨比建立之后

2 个答案: