page.data.json 404 not found & componentDidMount() not firing in production

[gregwhitworth]

Description

I couldn't find very much information regarding page-data.json but my site is currently hitting this where it 404's on finding any of these json files. The route is ./page-data/<route>. The only content I could find regarding this was this article introducing the breaking up of a larger manifest file.

Steps to reproduce

Here is a demo page I created for this: https://gwhitworth-dev.azurewebsites.net/blog/2019/06/demo/

Things of note

• There is an error that states: Failed to load resource: the server responded with a status of 404 (Not Found) https://gwhitworth-dev.azurewebsites.net/page-data/blog/2019/06/demo/page-data.json
• componentDidMount() is not fired in production which it does locally, so ultimately I think this is the issue but have no idea if it's related to the page-data.json

Expected result

The chart should render as it does locally

Actual result

If you open it you'll see that there is no highchart rendered although it does render locally

Environment

    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.6.7
  Browsers:
    Edge: 44.17763.1.0 [Not sure why it isn't listing Chrome, Firefox, Edge Chromium, etc]
  npmPackages:
    gatsby: ^2.11.6 => 2.11.6
    gatsby-image: ^2.0.29 => 2.2.0
    gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
    gatsby-plugin-feed: ^2.0.13 => 2.3.0
    gatsby-plugin-google-analytics: ^2.0.14 => 2.1.0
    gatsby-plugin-manifest: ^2.0.17 => 2.2.0
    gatsby-plugin-mdx: ^1.0.5 => 1.0.5
    gatsby-plugin-offline: ^2.0.23 => 2.2.0
    gatsby-plugin-react-helmet: ^3.0.6 => 3.1.0
    gatsby-plugin-sharp: ^2.0.20 => 2.2.0
    gatsby-plugin-typography: ^2.2.7 => 2.3.0
    gatsby-remark-copy-linked-files: ^2.0.9 => 2.1.0
    gatsby-remark-images: ^2.0.6 => 2.0.6
    gatsby-remark-prismjs: ^3.2.4 => 3.3.0
    gatsby-remark-responsive-iframe: ^2.0.9 => 2.2.0
    gatsby-remark-smartypants: ^2.0.8 => 2.1.0
    gatsby-source-filesystem: ^2.0.20 => 2.1.0
    gatsby-transformer-remark: ^2.2.5 => 2.5.0
    gatsby-transformer-sharp: ^2.1.13 => 2.2.0

Also, I was hoping that issue #11524 would fix this issue but it doesn't unfortunately. Any help is appreciated.

[KyleAMathews]

Is your webserver setup to return JSON files? Someone on AWS found that their bucket wasn’t serving JSON files as application/json #15151 (comment)

[gregwhitworth]

@KyleAMathews This does seem very similar, I'll need to dig into Azure and Apache (haven't needed to do sysadmin in years) to determine how to have it served as application/json rather than text/html

[gregwhitworth]

@KyleAMathews WE HAVE LIFT OFF: https://gwhitworth-dev.azurewebsites.net/blog/2019/06/demo/

That was the issue! I may write this up since it seems more than I have hit this, mine was on Azure however.

[eyalroth]

@KyleAMathews @gregwhitworth Could you please reopen this?

I'm experiencing the same "page-data.json not found" errors, and I believe it only started after I've recently updated my npm packages. I don't seem to experience the misfired componentDidMount though.

My site is hosted on Netlify, which is one of the major go-to platforms for gatsby sites. My site's repo is here and the site is here.

[colbyfayock]

@eyalroth does your issue look like this? #16097

[eyalroth]

@colbyfayock Looks like it; however, I'm not altering the matchPath, if that matters.

[jondujaka]

Having the same error all of a sudden. Hosted on Netlify and data from NetlifyCMS.

[jethromayuk]

Also having this issue, hosted on Netlify.

[jitendra-koodo]

I'm also getting 404 for prefetch request /page-data//page-data.json . Not sure where is this double slash coming from, possibly something is missing between these 2 slashes..

[crhayes]

I was experiencing a similar problem (deployed to Netlify), and for me it was caused by links to pages that didn't exist.

I was working on a design and I had a temporarily link to an "Articles" page I had not yet implemented. Gatsby was attempting to be intelligent and prefetch this page, but it didn't exist, so I was receiving these errors.

TLDR: Check to see if you are linking to any non-existent pages (any page that would 404)

[ScottSavarie]

For anyone coming in via search results: I was experiencing the same issue, it tuns out on a previous version of the site, a service worked had been installed for offline support. At some point it was no longer being used, but the service worker was still registered in any browsers that had hit the url. I was able to resolve the issue by completely uninstalling it via these instructions: https://www.gatsbyjs.org/packages/gatsby-plugin-offline/#remove

[itesainnovation]

Hi @gregwhitworth! I'm having the same issue with azure. How did you fix it? What do i need to change? Thanks a lot

[conspireagency]

@gregwhitworth @itesainnovation running into this as well still.

[barretb]

For the benefit of @gregwhitworth and others who run into this on Azure app service and spend hour upon hour trying to figure out what's wrong with their Gatsby deployment that works perfectly on their local machine:

Azure App Service, by default, doesn't have a proper mime type set up for JSON files. For Gatsbyjs, this will result in a bunch of errors, including 404 and page resources for / not found errors. The fix is simple.

Create a web.config file in your static files. Put the following code into it:

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
     </staticContent>
    </system.webServer>
</configuration> 

Now build and deploy to Azure App Service. If your problem is the JSON mime type, this will fix it. You can check out this StackOverflow link for more info.