Vue.js + Nuxt.js Duplicate Keys Error comes back again, besides client-side render error.

Deep look into the cause of the similar issue we’ve seen before.

I’ll be back…

Once again, our old friend, the rendering issue we had before appeared again, which is supposed to be resolved by tweaking :key value, and it has similar behaviour that the issue only appeared on Prod mode.

so first of all, we compared the error message between Prod and Dev mode which can be seen as below.

Prod mode

Dev mode

It looks like something in bundle javascript file isn’t happy, and what [Vue warn] message points out could be the potential causes. So our top priority is to resolve the [Vue warn] message.

Duplicate Keys Error.

The first one is not a stranger, duplicate keys error, I thought I have fixed it, however, I found there are actually 2 more components which looks like below.

I always think as long as each item of same array has different :key value, which should meet the requirement, it turned out that every :key value inside the component (or page) should be different from each other.

So what we could do here, is adding prefix or suffix to the :key value, so it will look like below.

Since we add prefix product- and place- to :key value, this ensures none of the :key value will be repeated to each other.

How About The Incorrect HTML Markup Error?

To be honest, this confuses me a lot, I don’t even know which part it is talking about, the message is too generic, this is actually another pain for people working on Vue.js project.

The error message of Vue.js sometimes can be really unhelpful for debugging.

Therefore, we need to try many ways to find the right spot.

First of all, we found the code caused this issue looks like below.

This shouldn’t cause any error, however, when we change v-if to v-show or even putting <no-ssr> to force it only client-side render, both change resolved the issue. 😂 😂 😂
(But I still don’t know why….)

So What Exactly Happened??

Long story short:

The value of variable isActive has opposite value in client-side and server-side.

In client-side rendering, the value of isActive is true, however, in server-side, it is false, which causes visual DOM conflict because v-if is doesn’t know whether to render the component or not.

This is why while putting <no-ssr/> can resolve the error, because it doesn’t need to consider server-side, and v-show doesn’t need to care about the conflict since it always renders component and toggles it just by CSS.

The Reason Behind It.

So we had a plugin function(below), which will be called and return boolean in server-side and client-side.

Plugin.js

However, while doing server-side, we need to pass request as param into this function, but the way this function is written, always assuming request will be passed if it’s server-side, which could cause potential issue.

I think most developers will say, ok, just don’t forget to pass request, and world peace. ✌️✌️

And that’s how we get the issue….

Before we go further, I need to mention a weird behaviour of created() lifecycle hook.

If you had experience with Nuxt.js, you probably know created() calls function in both server-side and client-side, which is very confusing for me.

In our case, the value is recognised as false since fn() return null,
in client side, the value happened to be true, aha!! The conflict appears.

The solution

By shifting the function in created() into middleware, make sure this will not have inconsistent behaviour with client-side, and request will always be passed in, so now we can avoid the issue happening again, and this is why I personally don’t recommend using created() , in my experience, it either hits API twice or calls same function twice, and causes some weird issue like this one.

👋 Hi there, we are currently recruiting mentors on BrewCareer, if you have interest in coaching and guiding people to help them to approach next career goal, please feel free to sign up and join us 🙂

BrewCareer | Learn from our career mentors.