New project from template-nextjs-personal-website page router, Cannot read properties of undefined (reading 'slug')

[ahelliet]

Hello,

I'm trying to build a sanity project from this template https://github.com/sanity-io/template-nextjs-personal-website, after setting up my env vars, on first launch i got this error in my console

TypeError: Cannot read properties of undefined (reading 'slug') at PageSlugRoute (webpack-internal:///./pages/[slug].tsx:28:27) at renderWithHooks (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderIndeterminateComponent (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15) at renderElement (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderElement (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9) at renderNodeDestructiveImpl (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/anthony/Desktop/report/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) ⨯ pages/[slug].tsx (33:24) @ slug

After some research it seems to be related to the next-sanity package but i'm not 100% sure.

Does someone have encounter this and could help ?

[meredithlampe]

Do you have any pages created in sanity studio? If sanity can't find a page to render for the slug URL you're at, that might be the issue

it's likely this line:
slug: initialPage.slug,
that's throwing. Try console logging inside of getStaticProps for that page (output will appear in terminal window from build script, not browser console) to see what's getting fetched from those client.fetch queries. I'd also copy the pagesBySlug query into the Vision plugin in Sanity Studio (replacing the slug param with the slug for the page you're viewing) to ensure that there is actually a page being returned by that query.