0

I have a GatsbyJS site and am hitting an issue where it can't find any page-data files nor is componentDidMount() firing. This only occurs in production, it works just fine locally both with a full build and in gatsby develop.

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 in production as it does locally

Actual result

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

Thanks in advance for the help.

gregwhitworth
  • 2,136
  • 4
  • 22
  • 33
  • Hi @gregwhitworth, Do you use the official [Highcharts React](https://www.npmjs.com/package/highcharts-react-official) wrapper? Could you reproduce that issue in some online code editor? For example: https://codesandbox.io/s/highcharts-react-demo-dunhx – ppotaczek Jul 02 '19 at 20:38

1 Answers1

0

So the issue here is that Gatsby has an expectation that the JSON content will come in with a mime type of application/json:

const isJson = contentType && contentType.startsWith(`application/json`)

My server was not configured to do this so it was sending json files with a mimetype of text/html and this was resulting in the page-data not being loaded and thus the components within the page not being rendered. In order to fix this I added this to the web.config file (I'm on Azure, I know this won't be universal):

<staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
gregwhitworth
  • 2,136
  • 4
  • 22
  • 33