[Bug?]: Error: Unexpected token < in JSON at position 0 on Deployment

[Gresliebear]

What's not working?

I am deploying redwoodJS on Linode BareMetal, I configured a nginx server to proxy_pass to the localhost:8910 by using 'yarn rw serve'. I am not finding very much success with pm2. Anyways I cannot render my ArticleCells the graphQL is not working correctly?

console network request appears 200 OK but all I get is a html page?

this is the payload

incorrect response supposed to be JSON

it fetches correctly on local development why not production

correct payload

correct response is JSON on local development

I looked up what his Error: Unexpected token < in JSON at position 0 it could be related to a few things

1. ** we are referencing a non-existent property of a object**
2. the api is returning a index.html file
3. fetching data immediately as the page loads causing a race condition.
4. Apollo GraphQL fetch request inside redwood don't work
5. ReactJS proxy logic doesn't allow /api to be inside root

Work Cited https://bobbyhadz.com/blog/javascript-unexpected-token-u-in-json-at-position-0#:~:text=The%20%22Unexpected%20token%20u%20in,JSON%20string%20before%20parsing%20it.

https://daveceddia.com/create-react-app-express-backend/#configure-the-proxy

How do we reproduce the bug?

No response

What's your environment? (If it applies)

No response

Are you interested in working on this?

• [X] I'm interested in working on this

[Tobbe]

Whenever I see Error: Unexpected token < in JSON at position 0 it's usually because I have some error on the API side. Usually something with the graphql stuff.

@Gresliebear Can you login to your Linode box and grab the RW server logs? Please paste them here if you can.

@cannikin Assigning to you since @Gresliebear is using Bare Metal

[Gresliebear]

RW server logs?

@Tobbe where do you find those logs? I didn't see anything in the application unless you mean implement then pull logs

[Gresliebear]

wget localhost:8910/.redwood/functions/

Output from Redwood Watch

{"level":50,"time":1658111941190,"pid":11983,"hostname":"localhost","name":"graphql-server","err":{"type":"GraphQLError","message":"Syntax Errror: Unexpected character: \"*\".","stack":"GraphQLError: Syntax Error: Unexpected character: \"*\".\n at syntaxError (/var/www/Hamlet/nod_e_modules/graphql/error/syntaxError.js:15:10)\n at readNextToken (/var/www/Hamlet/node_modules/graphql/language/lexer.js:420:40)\n at Leexer.lookahead (/var/www/Hamlet/node_modules/graphql/language/lexer.js:84:29)\n at Lexer.advance (/var/www/Hamlet/node_modules/graphql/langguage/lexer.js:67:38)\n at Parser.expectToken (/var/www/Hamlet/node_modules/graphql/language/parser.js:1408:19)\n at Parser.many (/var/Hwww/Hamlet/node_modules/graphql/language/parser.js:1525:10)\n at Parser.parseDocument (/var/www/Hamlet/node_modules/graphql/language/parse1r.js:121:25)\n at parse (/var/www/Hamlet/node_modules/graphql/language/parser.js:32:17)\n at Object.parse (/var/www/Hamlet/node_modulesl/@envelop/core/index.js:399:30)\n at processRequest (/var/www/Hamlet/node_modules/@graphql-yoga/common/index.js:144:30)","locations":[{"licne":1,"column":1}],"extensions":{}},"msg":"Syntax Error: Unexpected character: \"*\"."}

WGET works for redwood versions however other queries don't work

wget http://localhost:8910/.redwood/functions/graphql?query={redwood{version}}

[Tobbe]

Sorry dude, I've never tried a bare metal deploy, so not sure how to debug properly. Waiting for @cannikin to jump in here and save the day 🙂

Does this work when you run in on your own computer? Have you tried deploying to something easier, like Netlify? Does that work?

[Gresliebear]

Could it be Apollo-Client?

What is Redwood doing to send HTTPS? Apollo Link?

https://github.com/apollographql/apollo-feature-requests/issues/153

https://www.apollographql.com/docs/react/api/link/introduction/

Ok now investigating furthur this is a networking Error and RedwoodJS reports it as ServerParseError, however this doesn't tell me much

if we ctrl-f 'ServerParseError' we find it in FormError.tsx

[Gresliebear]

Sorry dude, I've never tried a bare metal deploy, so not sure how to debug properly. Waiting for @cannikin to jump in here and save the day 🙂

Does this work when you run in on your own computer? Have you tried deploying to something easier, like Netlify? Does that work?

No worries I am just trying to make deductive reasoning or crossing out what this could be

it works on my computer locally of course. Netlify? No idea, I will give it a shot but I want BareMetal. I had problems with Netlify and domain management its a nightmare. I just want to deploy my apps and move on with my life :(

[Tobbe]

@Gresliebear Did you try asking for help on Discord? Might get more eyes on your problem there 🙂

[cannikin]

I’m back from vacation on Wednesday, I’ll be in front of a computer then!

What’s the request URL for that previous request, the one to /auth? Did that one complete successfully or did it error as well?

[cannikin]

You can try making that request manually in the browser, the /graphql one. Try removing the /.redwood/functions part of the URL as well…

[Gresliebear]

I’m back from vacation on Wednesday, I’ll be in front of a computer then!

What’s the request URL for that previous request, the one to /auth? Did that one complete successfully or did it error as well?

The Auth request fails I cannot sign up it does 200 ok so it reaches the back end but the Response is the Same HTML as the other request.

it doesn't redirect or anything

[Gresliebear]

/.redwood/functions/graphql?query={redwood{version}}

@cannikin I tried 'http://www.hamletgame.com/.redwood/functions/graphql?query={redwood{version}}'

I got 404 Page and 200 Status code but the samething is that Graphql is returning `

`

Could it be nginx misconfiguration?

I tried removing .redwood/functions in the URL but the request ran the samething as before

[Gresliebear]

@Gresliebear Did you try asking for help on Discord? Might get more eyes on your problem there 🙂

@Tobbe I did no one responded yet

[cannikin]

Could it be nginx misconfiguration?

It very well could be! We haven’t filled out that section in docs yet, but I’ll paste you the one I’m using in my own app in prod. I get rid of the /.redwood/functions URL and just use /api:

upstream redwood_server {
  server 127.0.0.1:8911 fail_timeout=0;
}

server {
  root /var/www/myapp/current/web/dist;
  server_name myapp.org; # managed by Certbot
  index index.html;

  gzip on;
  gzip_min_length 1000;
  gzip_types application/json text/css application/javascript application/x-javascript;

  sendfile on;

  keepalive_timeout 65;

  error_page 404 /404.html;
  error_page 500 /500.html;

  location / {
    try_files $uri /200.html =404;
  }

  location ^~ /static/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location ~ /api(.*) {
    rewrite ^/api(.*) $1 break;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://redwood_server;
  }

  listen [::]:443 http2 ssl ipv6only=on; # managed by Certbot
  listen 443 http2 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/myapp.org/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/myapp.org/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = myapp.org) {
    return 301 https://$host$request_uri;
  } # managed by Certbot

  listen 80 ;
  listen [::]:80 ;
  server_name myapp.org;
  return 404; # managed by Certbot
}

You'll need to update redwood.toml to match the /api part of the URL so that GraphQL and other function calls match what nginx is configured to do:

[web]
  title = "MyApp"
  port = 8910
  host = '0.0.0.0'
  apiUrl = "/api"
[api]
  port = 8911
[browser]
  open = true

If that doesn't work, you'll want to try running yarn rw serve api and watch the log output. It could be that there's an error in the GraphQL files somewhere and the function isn't building at all. :(

[TristanWYL]

The first reaction for the description of this issue: Unexpected token < in JSON at position 0, is that a json parser tries to parse a json-alike string, but fails with exceptions because the string is not json-parsable. Probably it is the server responds with a html string, while the client try to parse it as a json object. So you may need to check that what the server returns and why it returns such string.

[TristanWYL]

How can we reproduce the issue? May need more details to help.

[Gresliebear]

How can we reproduce the issue? May need more details to help.

@TristanWYL I have written down my steps in a word doc and recorded myself doing this however I need to cover up the ip address and passwords, plus the video is two hours long etc

[cannikin]

@Gresliebear Okay I'm at my computer and can go through your issue a little more easily now!

So you're definitely getting the index.html page back from the web side, which says to me that nginx isn't configured right: it's returning the web side response for something that should be from the api side. By default, every URL should return index.html (it's actually 200.html now so that we can pre-render an index.html if you want to) so that React can take over and determine where you really wanted to go:

location / {
  try_files $uri /200.html =404;
}

(This assumes that the root of the app is /path/to/app/web/dist so that it only serves static files already on disk, it's not trying to like proxy localhost:8910 or something, which you would need to do if you're running yarn rw serve or yarn rw serve web. Since you've got nginx you can have it serve static files in web/dist and only run yarn rw serve api for the api side.)

For the api server to get requests you'll need a separate location in nginx so that it knows to send those requests to the yarn rw serve api process:

location ~ /api(.*) {
  rewrite ^/api(.*) $1 break;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://redwood_server;
}

So in my case it would take the URL https://myapp.com/api/graphql and turn it into http://127.0.0.1:8911/graphql which is where yarn rw serve api is waiting to take requests, that's what redwood_server is:

upstream redwood_server {
  server 127.0.0.1:8911 fail_timeout=0;
}

[Gresliebear]

@cannikin

Sorry for the late response I will get back to this Saturday or Sunday Hopefully I have deadline I am trying to meet and Work in general.

[Gresliebear]

https://github.com/redwoodjs/redwood/issues/961

[cannikin]

Any updates on this one @Gresliebear? Are you saying that the problem you were seeing is because of the 200 -> 404 thing mentioned in #961? Did you get a chance to try my nginx config above? I haven't had any problems with an API call returning HTML before, so it sure seems like something is misconfigured on your server somehow...

[Gresliebear]

@cannikin I have not had the time to come back and test this. I apologize my life currently is very busy, I want to get back to this, the #961 was a issue I was investigating to see if it was related to my issue, didn't finish the job.

@cannikin I do believe it has be a misconfiguration somehow related to Nginx, I recorded myself when I caused this bug, so if want to watch me suffer and make faces for 2 hours lol debugging this or breaking it https://youtu.be/ZPAACQOlQgA

because I wanted to produce a 10 minute video on redwood how to deploy baremetal redwood. Hopefully I can get to it by end of October.

I have a video script, if want a copy, I know you produced those videos in the docs? I don't know if you are going to make more. so I wanted to do my own video but life is very busy right now.

[cannikin]

That's okay, let's leave this open for now and you can add some detail when you get a chance.

Having a video for Baremetal deploy would be amazing! I've still got to make videos for the rest of the tutorial chapters (I'm a little behind 😬)