skip to Main Content

I encountered a problem during my development of my Gatsby Project. With Gatsby Develop everything is working correct but recently started the build process and deployed the website.

After I started the website on a browser I got the following error. It’s regarding my innovation file in my page directory:

Error: page resources for /innovation/ not found. Not rendering React

Failed to load resource: the server responded with a status of 404 () (page-data.json)

I thought maybe I use a component or lib that is breaking the page in prod. I revert back the source code to the template like this:

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;

The problem unfortunately still exists. I am desperate. The view is causing a blocking that no interactivity is longer working.

My gatsby-config.js file

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

2

Answers


  1. It seems a bug in the current version of Gatsby. Try downgrade the packages to the latest stable working version:

    "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",
    

    As shown in this GitHub thread.

    Remove your package-lock.json, your node_modules, and your cache folder (.cache) and fix the versions to the working ones.

    Login or Signup to reply.
  2. Try clearing your browsing history

    I don’t know why, but clearing my browsing history fixed the problem. I noticed before I did this the browser icon was the icon for a separate gatsby project that I had been working on yesterday, so maybe something is happening where your browser is mismatching details from separate gatsby projects

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search