nextein/link json error: Uncaught (in promise) SyntaxError: Unexpected end of JSON input
matthiasprieth opened this issue · 8 comments
Hey @elmasse thanks for this nice Blog generator!
When I clone this repo, run it on localhost & click on a link to a post on the /pages/index.js page, I get this javascript error in my dev tools.
index.js:107 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at _callee3$ (index.js:107)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype.<computed> [as next] (runtime.js:97)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
It doesn't redirect me to the /pages/post.js page. I need to do a whole page refresh then it shows me the post.
When I change to import Link from 'next/link' in /pages/index.js:5 & <h2><Link href={post.data.url}><a>{post.data.title}</a></Link></h2> in /pages/index.js:28, the linking works again.
Sorry for this sloppy bug report, but I guess you can fix this issue easily :)
Hi @matthiasprieth thanks for reporting this!
Try pulling latest from master and re-install dependencies. I just updated to latest versions.
I just checked the deploy and it seems to be working https://nextein-starter.elmasse.now.sh
I couldn't reproduce this issue yet on the latest changes. It seems I forgot to push the beta branch when I got the latest nextein published.
Please let me know and thanks for using nextein!
Thanks!
Max
@elmasse thanks for the quick answer!
I tried it again with the new dependencies & unfortunately it didn't work. For exported versions here on my machine it runs fine. Same as https://nextein-starter.elmasse.now.sh
Maybe you get the chance & you can try to reproduce the issue with the local/dev version. No hurry though :)
I tried locally and no issues so far. I started with npm run dev and opening http://localhost:3000 in Brave, then navigating to any of both posts clicking on the title.
Could you share which version of node are you running? OS?
Also if you have a complete stack trace that might help.
@elmasse thanks. This is very strange.
Win Version 10.0.18363 Build 18363
Node v12.16.2
npm v6.14.4
Also tried different browsers, install packages via yarn & to deploy to forestry.io preview server (your original repository -> no changes done). Same error everywhere. After it shows me the error in the dev tools at some point it reloads the page automatically & shows the post (after a fetching timeout occured or something).
index.js:107 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at _callee3$ (index.js:107)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype.<computed> [as next] (runtime.js:97)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
_callee3$ @ index.js:107 (webpack:///./node_modules/nextein/dist/entries/load/index.js)
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
(anonymous) @ router.js:298
change @ router.js:221
push @ router.js:209
singletonRouter.<computed> @ router.js:9
Link._this.linkClicked @ link.js:7
onClick @ link.js:18
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Interesting is also, that when I start my dev server with next instead of nextein I get this errors.
VM507:1 GET https://gn4ez0owcsrwbw.instant.forestry.io/_load_entry/posts/first-post.md 404
(anonymous) @ VM507:1
_callee3$ @ index.js:103
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
byFileName @ index.js:118
_callee$ @ post.js:127
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
getInitialProps @ post.js:168
getInitialProps$ @ _app.js:9
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
getInitialProps @ _app.js:94
loadGetInitialProps$ @ utils.js:40
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
loadGetInitialProps @ utils.js:40
getInitialProps @ router.js:552
(anonymous) @ router.js:412
_getData @ router.js:536
(anonymous) @ router.js:412
Promise.then (async)
getRouteInfo @ router.js:403
(anonymous) @ router.js:298
change @ router.js:221
push @ router.js:209
singletonRouter.<computed> @ router.js:9
Link._this.linkClicked @ link.js:7
onClick @ link.js:18
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 17 more frames
/first-post:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) @ router.js:298
change @ router.js:221
push @ router.js:209
singletonRouter.<computed> @ router.js:9
Link._this.linkClicked @ link.js:7
onClick @ link.js:18
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Hope this helps.
Ok, just to confirm. This seems to be an issue with Windows 10. I fired up a VM with Windows 10 Pro, running on Brave the issue is reproducible.
This should be fixed with latest nextein v2.4.1
I updated dependencies for starter. Please feel free to pull, or just update to v2.4.1 and re-test.
Thank you so much for reporting the issue.
Hey @elmasse! Thanks so much for this quick fix! Works now! Hope it's fine that I close this issue 🥇
Just another question: I tried to integrate my nextein blog into an existing next.js project. When I start my dev server normally with next or nodemon I'll get some similar errors like above... On the other hand when I start my dev server with nextein the blog works, but some next-routes from my old project seem to behave strange (e.g. 404 for / page & some other minor problems).
Is there a way to integrate nextein (server.js functionality) to my existing project (server.js) or would I need to write my own customized server.js somehow?
Great!
Just another question: I tried to integrate my nextein blog into an existing next.js project. When I start my dev server normally with next or nodemon I'll get some similar errors like above... On the other hand when I start my dev server with nextein the blog works, but some next-routes from my old project seem to behave strange (e.g. 404 for / page & some other minor problems).
The main intent for nextein was to use next as a static site generator using markdown content. Having said that, it might require some adjustments to be workable in a hybrid way. In case you have a repo example where I can take a look on the issues just ping me. There is a Gitter Channel in case you want to discuss more: https://gitter.im/nextein/Lobby