Hi, I have a Gatsby site that uses a fallback page for dynamic routes like /pup/* . The fallback page works fine locally when I use gatsby develop, but when I deploy it to Netlify, it gives me a 500 internal server error. Here is the code of my fallback page:
import React from “react”; // Import useSWR hook from swr library import useSWR from “swr”; // Import GatsbyPageProps type from gatsby package
// Import NotFoundPage component from 404.js file import NotFoundPage from “…/404”;
export default function PuppyFallbackPage(props) { // Get the value of the dynamic segment from the props[“Account_Number-:Puppy_s_Name”] property const segment = props[“Account_Number-:Puppy_s_Name”];
// Split the segment by the dash character and assign to variables
const [accountNumber, name] = segment.split("-");
// Define a fetcher function that returns a JSON response
const fetcher = async (url) => {
const response = await fetch(url);
const data = await response.json();
return data;
};
// Use useSWR hook to fetch data from API
const { data: pupsbreed, error } = useSWR("/api/puppies-breed", fetcher);
// Check if data is available and no error
if (pupsbreed && !error) {
// Search for the puppy that matches the slug
const puppy = pupsbreed.find((p) => p.slug === segment);
// Check if puppy is found and meets the criteria
if (
puppy &&
(puppy.Availability === "Available" ||
puppy.Availability === "Reserved" ||
puppy.Availability === "Sold, but Show") &&
(puppy.Status === "Approved" || puppy.Status === "Approved: Hold") &&
!puppy.Hide_on_Website
) {
// Display the details of the puppy on the frontend
return (
<div>
<h2> This is the fallback page </h2>
<p>Account ID: {puppy.Account_Number}</p>
<p>Puppy Name: {puppy.Puppy_s_Name}</p>
<p>Breed: {puppy.Breed}</p>
<p>Availability: {puppy.Availability}</p>
</div>
);
} else {
// Render a 404 page and pass the path and location props
return <NotFoundPage path={props.path} location={props.location} />;
}
} else {
// Display a message that data is loading or error occurred
return (
<div className='text-center mt-4'>
<button className='btn btn-primary'>
{error ? "Error loading data" : "Looking for puppy in our DB..."}
</button>
</div>
);
}
}
// This is optional, but recommended PuppyFallbackPage.matchPath = “/pup/*”;
// Export an async config function export async function config() { // Return a function that takes params as an argument return ({ params }) => { // Return an object with defer key return { // Set defer to true for all pages defer: true, }; }; }
I have tried to use the Essential Gatsby build plugin and the Gatsby plugin for Netlify, but they didn’t solve the issue. I have also tried to use gatsby-plugin-offline to add an app shell, but it didn’t work either. I have checked the Netlify status page and there are no incidents or maintenance that could affect my site.
Does anyone know what could be causing this issue and how to fix it? Any help would be appreciated. Thank you.