Help needed with an error in Next.js and Sanity.io integration tutorial.
18 replies
Last updated: May 12, 2023
D
HELP PLEASE 🙏
I am trying Sanity and Next.js for the first time and following this tutorial by User to create a portfolio
https://www.youtube.com/watch?v=OcTPaUfay5I (min 48:17)
I have this error in the browser that I don’t know how to solve.
It came up after writing these lines of code in page.tsx (screenshot). The red line is because I havent added typescript yet but it shouldn’t be the reason?
The error seems to point to something wrong in index.cjs but VSC doesnt show any problem there.
Any ideas on how to solve this?
I am trying Sanity and Next.js for the first time and following this tutorial by User to create a portfolio
https://www.youtube.com/watch?v=OcTPaUfay5I (min 48:17)
I have this error in the browser that I don’t know how to solve.
It came up after writing these lines of code in page.tsx (screenshot). The red line is because I havent added typescript yet but it shouldn’t be the reason?
The error seems to point to something wrong in index.cjs but VSC doesnt show any problem there.
Any ideas on how to solve this?
Apr 14, 2023, 9:10 AM
J
i'm in the same boat. I've run into an issue about Unexpected token u in JSON at position 0 at JSON.parse
Apr 14, 2023, 9:11 AM
J
return (
<div>
{projects.map((project: any) => (
<div key={project._id}>{project.name}</div>
))}
</div>
)Apr 14, 2023, 9:25 AM
D
Thanks
user L
I tried it and the issue persists. 😕Apr 14, 2023, 9:30 AM
Y
Maybe it's a typo in sanity-utils.ts?
Apr 14, 2023, 9:34 AM
J
Please show me a screenshot when mouse over the
projectparameter.
Apr 14, 2023, 9:34 AM
D
user Q
It doesnt seem so… if i put back the start code in page.tsx and leave utils as it is, there is not problem.Apr 14, 2023, 9:40 AM
Y
Well, presumably it won't be used then, so it doesn't trigger the problem.
Apr 14, 2023, 9:42 AM
D
ok, checking now…
Apr 14, 2023, 9:43 AM
Y
👍 I would doublecheck the GROQ query in getProjects
Apr 14, 2023, 9:43 AM
D
Thanks
user Q
it worked! 🙏Apr 14, 2023, 9:47 AM
J
hey
user V
did you solve your problem?Apr 14, 2023, 10:26 AM
J
I'm stuck on that too
Apr 14, 2023, 10:26 AM
J
found the answer lol it was a missing '=' sign
Apr 14, 2023, 10:27 AM
D
Yes, 😂
Apr 14, 2023, 11:38 AM
J
mine too don't feel bad
Apr 14, 2023, 11:51 AM
M
I am having similar issue as you had.
May 11, 2023, 11:38 PM
M
user L
adding : any didn't work for meMay 12, 2023, 12:22 AM
N
Looks like you made a successful little community to solve this, great!.
Here's a little bit of defensive code that you or anyone else in future can place just before where the trouble starts, as shown, to avoid the not-very-informative errors, and just get a hint that you won't miss, on screen:
There are other ways to do this, but simple is good, no?
If you want to try it out, just set
(of course it can be other things in the client code, but query is most likely, and this will send you there anyway)
Here's a little bit of defensive code that you or anyone else in future can place just before where the trouble starts, as shown, to avoid the not-very-informative errors, and just get a hint that you won't miss, on screen:
export default async function Home() {
const projects = null / await getProjects()
if (!projects) {
return (
<h2 style={{ fontSize: '36px', color: 'red',}}>
No projects found -- check your query!
</h2>
)
}
return (
<div className={'max-w-5xl mx-auto py-20'}>
<h1 className={'text-7xl font-extrabold'}>
Heroic <span className={'bg-gradient-to-r from-orange-400 via-red-500 If you want to try it out, just set
projects = nullon a line before the
ifstatement, and then refresh your app screen...enjoy...
(of course it can be other things in the client code, but query is most likely, and this will send you there anyway)
May 12, 2023, 2:39 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.