vue-event-scheduler
vue-event-scheduler copied to clipboard
HackAfro
Problem scheduling events
Hi! I don't know why, but I've done everything on the GitHub instructions and apart from that I've also followed the instructions given on the Pusher website. But somehow I end up at the same point: the schedule button isn't working, so the events aren't displaying on the calendar. Thanks in advance!
Apologies for the issues you've faced. I cloned the project and fixed the issue. You can simply clone the repository and everything should be working smoothly
To start with, I have to thank you for your amazing job on this calendar, keep up the good work! Second thing, I have to thank you for your polite and fast reply to my issue.
All that being said, there are a few errors still popping up, I'll try to upload a screen capture of them just below:
In case you can't see them good, because of the resolution of the image or some problem that might appear, I'll copy and paste them below as well:
error 1: POST http://localhost:4001/schedule 500 (Internal Server Error) schedule:1 error 2: [Vue warn]: Error in v-on handler (Promise/async): "SyntaxError: Unexpected token < in JSON at position 0"
found in
---> <EventForm> at src/components/EventForm.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 (anonymous) @ vue.runtime.esm.js?2b0e:1856 Promise.catch (async) invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:619
error 3: SyntaxError: Unexpected token < in JSON at position 0
at VueComponent._callee$ (EventForm.vue?d711:45)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:271)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (asyncToGenerator.js?3b8d:5)
at _next (asyncToGenerator.js?3b8d:27)
logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 (anonymous) @ vue.runtime.esm.js?2b0e:1856 Promise.catch (async) invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:1888
I think the issue here is that there was a non-JSON response from the server and we tried to convert it to JSON anyway. You can find the issue in line 61 of the EventForm.vue file. Here's the snippet:
body: JSON.stringify(event),
headers: {
'content-type': 'application/json'
}
});
await req.json();
this.resetValues();
So you can comment out that line, I'll do that myself too and also, try and investigate the issues you're having with the server; it seems it is returning a 500 error code.
I'm happy to help if any other issues arise
If there's a JSON error, i assume it must be on the stringify part involving the event in it. If so, how can i get the event stringified without using the JSON method? Because I can't just omit de code part of the event as it is an important part of the EventForm.vue file.
Thanks a lot! I really appreciate your fast feedback and help!
The req.json() line doesn't do much because you do nothing with the response from the server. Maybe you can provide a screenshot of the response from the server; this would help better diagnose the errors you're getting.
Here's when I fill the forms with some information. Then when I press the schedule button, the information disappears (thing which didn't before, I think that's good) but nothing shows up on the dates I selected and the 500 error code pops up.
This is good but can I see the network panel for the request made to the server. Or rather, you can log your response to the console. It seems there's an error something going on in your server
Did you create a .env file in the base folder of your project? If yes, did you add the following values to the file:
PUSHER_APP_ID=<YOUR_APP_ID>
PUSHER_KEY=<YOUR_APP_KEY>
PUSHER_SECRET=<YOUR_APP_SECRET>
PUSHER_CLUSTER=<YOUR_APP_CLUSTER>
Yes, I created the .env file and added my pusher account own values as you stated on the tutorial
The error above is showing that the pusher key being loaded to is not a string, so maybe you can try logging the keys to console before using them. Just to ensure that the right values are being used.
I've searched for all the errors that de network panel showed and I think that the error is about the req variable that we commented on the EventForm.vue spread onto some node_module folder files, should I just delete all the req variables I find in those files or something else? That string thing that you mentioned I think it's popping up the error because of what I just explained because everything is correctly settled at the .env file
Okay, I think the easiest way to solve this is for me to see your current setup, do you have an active repository for this demo I can go through? Or are you willing to import the project to codesandbox so I can check it out?
Any of these will work best to help resolve your issues
Might be far fetched but please look at your .env file and ensure it is similar to the snippet below:
PUSHER_ID=app-id
PUSHER_KEY=app-key
PUSHER_SECRET=app-secret
PUSHER_CLUSTER=cluster
Shall I upload it to Google Drive so you can download it without any trouble? Send me an email to: [email protected] so I know your email privately and I shall send you the invitation to download it!
The req variable in the EventForm.vue is still giving me errors because i don't use it...