I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.

Whenever I try to navigate to the /login or /signup route by clicking the links in the navbar, on the first click the page source is not re-rendered (i.e. I keep seeing the same text Landing Page, and on refreshing the route, I get the 500 server error. Error

The console logs the following warnings, but I have no idea how to correct them or why are they originating. Console

Any help as to why this hydration error is generating would be really helpful!

PS:

1. Most probably the error should be originating from either the /pages/signup.vue, /pages/login.vue or /components/navbar.vue.
2. I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)

CodePudding user response：

You are trying to access a property of null type. That's why you are getting the error.

 <div v-if="error.show" >{{ error.message }}</div>

In the above line, you are trying to access error.show but from the global store, the returned error value is null type.So you are trying to access the show property on a null type and thus getting the error.

There are many solutions to handle this. Either, you can just check it in the computed property, or you can use simply add optional chaining like this

 <div v-if="error?.show" >{{ error.message }}</div>