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

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>

1. 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.

[jigs1996]

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

Yes i have same issue any suggestion

[johndoudou]

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