JSON.parse error for settings/themes

[bobweston]

When trying to spin up this application using the dockerfile, I'm getting the following error (in the web browser):

Error in settings/themes.json:
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 5 of the JSON data

Please note that I've not made any changes to the themes.json file. Since this is docker, it shouldn't matter. But I'm running this on an Ubuntu 14.04 instance.

The console reports that the bit that is failing is bundle.js:13585:10

That in turn points here:

var json = type("application/json", function(xhr) {
  return JSON.parse(xhr.responseText);
});

Does anyone have any thoughts on how I might fix this? I've not made any changes to the settings found on the repo.

I've read elsewhere that JSON.parse might actually be the cause of the problem (at least that seems to be what I'm seeing with other apps that report the same error).

It shouldn't matter. But I guess I should point out that I'm using an nginx reverse proxy to hit the application..

I'm starting the application like below (with my reverse proxy using the port 8090 setting)

docker run -p 8890:8888 -t -i audiogram npm start

I appreciate any help or feedback.

[bobweston]

For anyone else using a reverse proxy in front of this app, here's the work around.

The error was a red herring. Basically, the file isn't getting loaded at all (resulting in a 404 error).

All other assets were loading properly with the reverse proxy. But for whatever reason, this json file was attempting to be loaded from http://localhost/settings/themes.json. That obviously won't work.

The line loading it is here:

https://github.com/nypublicradio/audiogram/blob/master/client/index.js#L7

d3.json("/settings/themes.json", function(err, themes){

Changing that line to what you'll see below fixes the issue:

d3.json(window.location.protocol + "//" + window.location.host + "/settings/themes.json", function(err, themes){

It is unclear to my why the original code doesn't work. It should be doing the same thing as the modification. (Perhaps I'm missing something though).

But I thought I would note this work around in case anyone else runs into the issue.

[bobweston]

I'm reopening this issue after reading of changes (and problems with) D3

https://newsnerdery.slack.com/archives/C0J7ANV53/p1504796798000226

Parallels include:

• It potentially involves recent changes to d3.json
• It has to do with weird request behavior
• The affected build processes involve browserify, which audiogram also uses

(This may or may not be related. But I thought you all might want to be aware of it in either case)

[nbashaw]

I had the same issue, and the fix you posted worked for me too!

[muffl0n]

Same problem for us with >=d3-4.10.1. "Fixed" by reverting to d3-4.10.0.

[defenestrated]

Just wanted to say thanks for this – came across this fix on a totally unrelated d3 + npm project. Saved the day (/night)!