Uncaught TypeError: n.setAttribute is not a function when ssr client-side hydration

[yinxin630]

Version

2.6.10

Reproduction link

https://github.com/yinxin630/vue-issue-example

Steps to reproduce

1. clone and npm i
2. run npm run build and npm run build:ssr
3. run node src/ssr.js
4. render app.js with ssr get result

<div id="app" data-server-rendered="true"><!----><h2>2222222222</h2></div>

5. open in browser. client-side hydration will throw error Uncaught TypeError: n.setAttribute is not a function

What is expected?

client-side hydration success

What is actually happening?

throw error Uncaught TypeError: n.setAttribute is not a function

---

I found this when debug. vue call n.setAttribute('class', 'm-image-padding') but n is a comment node.

In app.js I use v-if. It will be true when ssr but be false when csr.

I don't know if there is something wrong with my usage or the logic of vue client-side hydration.

[yinxin630]

#5919

[posva]

There as a division by undefined at

:style="{ paddingTop: `${(1 / aspectRatio) * 100}%` }"

Make sure aspectRatio is a number !== 0 and NaN. You can use Infinity to get 0: 20/Infinity -> 0

[yinxin630]

There as a division by undefined at

:style="{ paddingTop: `${(1 / aspectRatio) * 100}%` }"

Make sure aspectRatio is a number !== 0 and NaN. You can use Infinity to get 0: 20/Infinity -> 0

Thanks for your reply. But it should not be for this reason.

The problem persisted after I changed it to :style="{ backgroundColor: 'red' }"

yinxin630/vue-issue-example@8d183a7

[posva]

Right I didn't see that v-if
You have an hydration problem because on the server the v-if is falsy while on the client is truthy. It must be the same value upon initial rendering. So make sure the initial value is the same on data and change it in mounted (only runs on the client):

export default {
  data() {
    return {
      aspectRatio: 0
    };
  },

  mounted() {
    this.aspectRatio = 2;
  }
};

[yinxin630]

@posva Thanks, this is an effective solution.

I also found that I only need to change v-if to v-show, and the result is as expected

[kirkins]

Also getting this error but not when running with npm run dev only once I went to deploy I found there was problems related to said error.

[Sir-Deon]

@kirkins I have this same issue on production mode but not on dev mode

[jigs1996]

@kirkins I have this same issue on production mode but not on dev mode

Yes i have same issue any suggestion

[corentin-cres]

I have the exact same problem, a value is false on ssr, true on csr, I have a v-if to display or not a NuxtLink.
Upon hydration, console displays TypeError: el.setAttribute is not a function.

Note :

• I'm running the project through yarn dev
• I can simply fix the problem using v-show instead of v-if
• I have to refresh the page to see the error : if I navigate through my app using the router, all is fine
• And MOST IMPORTANTLY, i do not have the problem if the v-if has a corresponding v-else

[sishenhei7]

I have the exact same problem, a value is false on ssr, true on csr, I have a v-if to display or not a NuxtLink. Upon hydration, console displays TypeError: el.setAttribute is not a function.

Note :

• I'm running the project through yarn dev
• I can simply fix the problem using v-show instead of v-if
• I have to refresh the page to see the error : if I navigate through my app using the router, all is fine
• And MOST IMPORTANTLY, i do not have the problem if the v-if has a corresponding v-else

I know why you do not have the problem if the v-if has a corresponding v-else.
It's because without v-else, at ssr vue will render the node to a comment node, however comment node don't have a setAttribute method; but with v-else, vue will render the 'else' node, which is a vue node and has the setAttribute method。

[KiranJasvanee]

Any solution to this issue? I'm still facing the issue in production. In dev it's working fine.

[rahulmanas]

v-if was the issue. In SSR mode, i was using v-if in the layout. I removed the v-if with v-show and it worked like a charm.

[rrmesquita]

In my case, the main issue is that when this error happens, everything else is prevented to execute, so instead of just breaking one part of the page, the whole rest of the page doesn't work.

Edit: Not a single component gets its mounted hook executed.
Edit 2: I'm using Nuxt 2.15.8