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
It seems a bug in the current version of Gatsby. Try downgrade the packages to the latest stable working version:
As shown in this GitHub thread.
Remove your
package-lock.json
, yournode_modules
, and your cache folder (.cache
) and fix the versions to the working ones.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