Uncaught syntax error in github deployment - javascript

I made a simple website that recommends restaurants based on your city using Zomato API. It works perfectly locally, but when I deployed on a GitHub page it gives me the following
POST https://devangmukherjee.github.io/locations/delhincr 405
(anonymous) # index.js:15
index.js:15 - const res = await fetch(${hostname}/locations/${query}, {
and
index.js:24 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
index.js:24 is });
The repo is here - https://github.com/devangmukherjee/random-zomato-restaurant
It is a very small repo only three files.
The website link is here - https://devangmukherjee.github.io/random-zomato-restaurant/
The same code works perfectly locally. What can I do?

When you visit the website locally, you are running your Express backend on localhost too. But, when you visit it on GitHub, your backend isn't executing on GitHub's machines. So, when I write "Mumbai" in the search field, in the line const res = await fetch(`${hostname}/locations/${query}`, { you are actually fetching https://devangmukherjee.github.io/locations/mumbai. Since that GitHub's URL doesn't allow POST HTTP method (because your backend isn't executing there), you are getting a 405 HTTP error. Thus the first error. This response's body is HTML and not JSON. When you do res.json() on line 23 there is a parsing error when it finds the angle bracket of the first HTML tag. And that's the reason for your second error.
To make it work you have to deploy your backend somewhere else, e.g., Vercel or Netlify serverless functions or Heroku (among many other possibilities). And then, update your hostname variable on line 4 accordingly.

Related

Having a hard time getting Api from localhost?

I am on this project wherein I need the api from this specific software. I cannot fetch it when I am trying to fetch it, sometimes error 404 are occuring,
sometimes no-cors policy.
Then sometimes like this: GET http://localhost:8000/events/1003/results net::ERR_CONNECTION_REFUSED
getEvents # orbiter.js:22
(anonymous) # orbiter.js:28
Then sometimes Uncaught (in promise) TypeError:
There are no authorization that needed based on the documentation or headers. Or i thought so it does not have?
But i think this is because of the way that I am fetching the API, it looks like I am doing it wrong. The API as i am trying to get on the instruction on the documentation it says i can access it on "localhost"
At first i just need to open the software to have access on the localhost so the http port will open, then i go to "localhost" then everything is on that local host
This are the picture Screenshot of The LocalHost I need to access
Now based on this I need to get the result of the event. Based on the documentation I need to go to path "localhost/events/{event-id}/results" then a json format would be send back to me.
I go to the url using browser using that path and I get the result, This are the result based on that path but this are the thing, when I am trying to put it on the code using Javascript language es6 module wherein I am fetching the api and I put the link "localhost/events/{event-id}/results"
this are the code:
const link = "http://localhost/events/1003/results";
async function getEvents() {
const response = await fetch(link);
const data = await response.json();
console.log(data);
return data;
}
getEvents();
I cannot access now the data that I needed from the API. Even though the path on the link that I put was correct. Am i missing some steps here? That's all. As you can see, localhost is the main path, then i just follow the path based on the documentation to get the results. (Because what i need to access are the results of the events). Then errors has occurred. This are the documentation that may help you to help me. I hope some of you may help me on this one as I'm still a beginner on programming
https://drive.google.com/drive/u/0/folders/1Il6GPL-pqxeS8OWVOEt36OF-a_FfQwpj

Stripe works in localhost but gives error in live

I'm currently developing a stripe checkout for my website, it's working in localhost but gives me this error : JSON.parse: unexpected character at line 1 column 1 of the JSON data. In localhost I get this error if I name in a JSON payment intent field that does not exist, I've already set the live website in HTTPS channel
Stripe has a support article that explains how to debug and fix this error.

Getting error while Deploying mBeam Microservices to mCM Container

I am working on the the Smart-car-use-case provided in the mimik website. When i try to follow the steps '[B5-1] ,[B6-1], [B7-1] ', which will deploy the microservices to the mCM container,
I am getting the following error in postman.
[json.exception.parse_error.101] parse error at line 1, column 2: syntax error while parsing value - invalid number; expected digit after '-'; last read: '--'
Please make sure that the deployment of all microservices are successful. You can verify deployment by running GET http://{{YOUR_IP_ADDRESS}}:{{PORT}}/mcm/v1/images (or [B4-1] in Postman collection) and looking at the response. Your response should contain the names of all the required microservices (miot-v1, msuperdrive-v1 and mbeam-v1). If the microservices are missing; you will need to deploy them again.
NOTE:
edgeengine must be running at all times in order to complete everything correctly

MetaMask does not inject window.ethereum: Uncaught (in promise) TypeError: Cannot read property 'request' of undefined

To start, let me mention this is an in-browser project, so i can only use
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
So a few months back I made a dapp, which worked fine even tho I never set a provider, so I guessed it used the ones given by MetaMask.
However, i am using the guide here the only issue is the following code,
var account_global, connected = false;
async function connect() {
if (!connected) {
var wei;
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); // Waits for connection to MetaMask.
account_global = accounts[0];
web3.eth.defaultAccount = account_global;
console.log(account_global.toString() + " connected!");
connected = true;
console.log(account_global);
}
}
connect();
This code used to output the address of the metamask user after they approved metamask on my dapp, however I am receiving the error
Uncaught (in promise) TypeError: Cannot read property 'request' of undefined
The error just says that, my actual goal if i have to add providers and all is to use the ones from metamask, and allow connecting to metamask, the rest of the functions such as transfer or others i know how to handle them, it just seems that my issues come when i try loading the page.
I dont have an ether node to use, not planning on using nodejs either, only a single html file displaying the Metamask address, hence using the in-browser web3js.
I hope its just me not realizing something simple, because I cant seem to find the reason I cannot use web3js right now.
The actual problem is, that you need to run your script on some server. For testing purposes you can use localhost.
Please, refer to this link on how to start local server. And just open your file via localhost:XXXX where XXXX - are the port number.
Solved the mystery, seems to be just like the error code showed
Uncaught (in promise) TypeError: Cannot read property 'request' of undefined
genuinely meant that window.ethereum was undefined, so for no exact reason MetaMask would not inject ethereum, noticed that after reading Metamask and Web3js documentation, that my issue had nothing to do with their code, in fact i am gonna end up using the code shown on this answer.
https://ethereum.stackexchange.com/a/78987
The issues seeems that no matter the browser Metamask would not inject, so i tested it on multiple websites that usually require Metamask to connect and other normal sites just as google.com, to my surprise every site would have Metamask injecting ethereum apart from my own test site, so it meant that my site was cursed or something, or just the fact that Metamask does not inject on unhosted websites (just had the files on my destop to test), instead on an actual host it did inject and my tests were working on those sites.
Conclusion
Metamask requires a normal host to inject, it wont inject on a random file opened on your own workstation.
I had the exact same issue and it turned out my HTML was a bit dodgy (had an extra tag before the <html> tag) and that was preventing MetaMask from injecting web3.

VueJs 2, NodeJs and reload page

I have a question with VueJs and the refreshing page. When I refresh my VueJs app with specific URL (for example : /tag/1), an error occurs : "Uncaught SyntaxError: Unexpected token <".
My server is created with NodeJs and I use ExpressJs. My templating engine is EJS.
I have defined a route :
app.get('*', (request, response) => {
response.render('layouts/index')
})
In the documentation for ExpressJs, it's possible to use a plugin "connect-history-api-fallback" to replace ".htaccess" of Apache but this cannot work.
let app = express()
app.use(history({
verbose: true,
index: '/'
}))
What is the issue ?
Thanks,
This is happening because your client app (vue.js) is expecting to receive some valid JSON object, but your server is giving a HTML page.
When attempting to convert some string like <html><head>... into a javascript object, your JSON parser fails and gives that error. To replicate this locally, open your developer console and run the following command:
JSON.parse("<html></html>")
To find out what exactly is going wrong, you need to look into the network tab of developer console and look at the server responses for API requests - you expect JSON but server might be serving index.html
Assuming your server side is all good and handles API requests as expected, then it might be a simple error in your vue component - instead of loading your tag data from /api/tag/1 (which gets a valid JSON string), you might be attempting to load /tag/1 (which will only get your index.html).

Categories