Cannot read properties of undefined (reading 'lang') when trying to access project's detail

¡Hello! I'm trying to make the projects detail work (/projecte/UID) but it won't work, it says "Cannot read properties of undefined (reading 'lang')". I don't know why is this happening, I hope someone can help me with this, thanks!

Heres my project's repository: GitHub - quimzu/enricrojo.com

Hi Dani :slight_smile:

I've had a quick look at your repo and I can see the issue.

You've built your file structure up to have a route like /projecte/uid

But I noticed your routing inside the /projectes/ path is using '$route.fullPath+"/"+post.slugs[0] which results in a projectes/uid expectation (projectes instead of projecte).

If I set this to:
<nuxt-link class="img_projecte" :to='"/projecte/"+post.slugs[0]'>
Then it correctly navigates through.

You'll need to match the pages folder path with the project path you've set. Or better yet use the route resolver to handle your URL behaviour and use the prismic-link component instead of the nuxt-link.

I also noticed you're trying to pass a 'post' instead of 'page' into your store action for load but the function is expecting 'lang' and 'page' in the second argument.

async load (store, { lang, page = { alternate_languages: [] } }) {..

A quick fix for this is to set page: post in your dispatch event in projecte/uid

await store.dispatch('prismic/load', { lang, page: post })

Also page = { alternate_languages: [] is possibly an issue as you're setting this as your default which is where your original lang query is coming from.

I'd advise in having your props either have correct default values or setting some conditionals on your values, this will help you debug a bit easier as the "Cannot read properties of undefined (reading 'lang')" is a bit of a red herring here, but still worth fixing.

For example you're checking if the first array item lang value equals es-es v-if="alternateLanguages[0].lang == 'es-es'" and if anything interrupts passing your alternativeLanguages prop value then it will default to an empty array and stop your conditional from being able to check the first item like you're doing above and fall over.

v-if="alternateLanguages.length && 'lang' in alternateLanguages[0] && alternateLanguages[0].lang == 'es-es'"

is one option/example. :slight_smile:

Let me know how you get on

1 Like

Thank you, it worked. Now I got another problem, and it is that when I change language using the LangSwitcher in /projecte/_uid it redirects me to / instead of the same page. This problem only happens there for some reason.

1 Like

Hello @quim_ddv

You have to create language switcher described in this documentation here: Internationalization with Nuxt - Documentation - Prismic

1 Like