Freecodecamp: BETA: On Managing packages with NPM, get error 'Unexpected token < in JSON at position 0"

[byronholmes]

Managing Packages with NPM, How to Use package.json, the Core of Any Node.js Project or npm Package
https://beta.freecodecamp.org/en/challenges/managing-packages-with-npm/how-to-use-packagejson-the-core-of-any-nodejs-project-or-npm-package

Whenever I put in my glitch URL to test my JSON, I get the error 'Unexpected token < in JSON at position 0".

I have tried this in Chrome and Firefox (latest versions). In Firefox, the error is slightly different, saying 'char 1 column 1' instead of 'position 0'.
This is desktop windows 7.

[bqnguyen94]

Can you give the first few lines of your package.json? This error usually means the receive content is not in JSON format.

[byronholmes]

Sure, here it is:

{ "author" : "John Doe",
"name": "fcc-learn-npm-package-json",
"dependencies": {
"express": "^4.14.0"
},
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"engines": {
"node": "4.4.5"
},
"repository": {
"type": "git",
"url": "https://idontknow/todo.git"
}
}

The url is:

https://glitch.com/edit/#!/crimson-swim?path=package.json:17:1

Also, the default JSON (written by tutorial author, on glitch, no 'author' field added) returns the same error.

[jsonkao]

I've encountered this error whenever React flips a table and receives or tries to process an HTML file rather than JSON. The causes of this usually include:

1. Glitch broke, and is giving back an unhandled error on their side
2. React silently broke and flipped a table
3. Incorrect paths to certain assets in the index.html.

I'll take a look at these possible faults locally.

[jsonkao]

I've confirmed the error. We are encountering Unexpected token < in JSON at position 0 because Glitch is sending back HTML. The error contained within the HTML:

<noscript>
  <h1>
    To use Glitch, please enable JavaScript
  </h1>
</noscript>

UPDATE: Working on a fix; will open a PR soon.

[byronholmes]

Jason, Bao, thank you both very much.

[jsonkao]

@raisedadead could you point me in the direction of where the requests are made for this particular component? I suspect this is a headers issue. I've looked through the actions, the epics, and the back-end components and have searched with console logs, Redux Logger, and Redux DevTools, yet I cannot pinpoint the source of the request.

[raisedadead]

Requesting @Bouncey for assistance on this.

[Bouncey]

@byronholmes @jkao1 This issue is present because the wrong URL is being used.
The backend challenges require the front-facing URL. In this case it is https://crimson-swim.glitch.me

It can be found here:

[jsonkao]

Thank you so much @Bouncey. I want to add feedback/instructions to prevent any confusion around this issue.

I'll open a PR adding sync validation to the URL, making sure a proper glitch URL is present in the solution input.

[smartITNinja]

Hi, I have this doubt: why is Glitch requested to pass these tests?

We can pass this test easily if we use a self-managed service rather than using Glitch.

A simple Node JS + Express will do the trick just fine. In fact, I passed them using my own server because I got bored after struggling a couple of hours with Glitch.

let jsonTpl = `{
        "author": "John Doe",
        "description": "freeCodeCamp - Apis And Microservices Certification (300 hours)"
}`;
app.get('/_api/package.json',function(req,res){
        res.json(jsonTpl);
        res.end();
});

Regards

[ilanoh]

Hello, this issue is still not resolved, how can we continue the challenge ?

[jbberinger]

I'm having the same issue. I've tried all of the suggestions.

[raisedadead]

Please reachout to our community Forum, and log a fresh issue if its confirmed as a bug there.