Vue SSR fails with innerHTML

[nickmessing]

Version

2.4.2

Reproduction link

https://github.com/nickmessing/vue-ssr-issue

Steps to reproduce

Use domPropsInnerHTML in JSX or v-html in Vue Template.

Or:

• Clone the repo
• npm install
• npm run dev
• Open http://localhost:3000 and http://localhost:3000/jsx

What is expected?

No warning in console.

What is actually happening?

DOM Mismatching error.

---

v-html works fine when there are no children, but fails if there are.

One option is to completely ignore innerHTML and v-html in vue-ssr. Basically commenting this line solves the problem.

Another option is evaluating innerHTML before comparing DOM snapshots so you get value from innerHTML on static SSR-rendered website without DOM Mismatch.

Third option is ignoring children in createElment if there is innerHTML domProp. I think this one is the best.

[yyx990803]

Probably related to #6490?

[nickmessing]

@yyx990803, yes, it's same error.

[nickmessing]

@yyx990803, thank you, will check with JSX

[yyx990803]

@nickmessing should work JSX too since v-html is basically an alias for domProps: innerHTML. Feel free to PR for a JSX test case

[panganibanpj]

Still seeing an error if i replace the <h1>Hey</h1> in index.vue and <h2>Hey</h2> in jsx.vue with with &quot;<svg><path/></svg>

server innerHTML:  &quot;<svg><path/></svg>
client innerHTML:  "<svg><path></path></svg>

EDIT: my mistake, it looks to only be an issue in jsx.vue. but i've also noticed " breaks it too

[tmorehouse]

@yyx990803 I ran into a similar issue in a functional component using innerHTML to render the entity ×.

The × is the default value for a functional component prop (which can be changed to other HTML markup by the user)

SSR renders the inner HTML as ×, but the browser when using innerHTML converts some entities to actual UTF-8 characters (i.e. × is converted by the browser, via native innerHTML, to ×)

Ultimately this causes rehydration to bail and re-render the component (and spew errors in dev mode)

A few other HTML entities can also fail hydration when used in innerHTML: …, », «, etc.

Minimal markup to recreate SSR hydration bail issue:

export default {
  functional: true,
  props: {
    icon: { type: String, default '×' }
  },
  render(h, { props }) {
    return h('button', { domProps: { innerHTML: props.icon } });
  }
}

using a SFC template, (non functional component with v-html) the issue doesn't appear.

[yyx990803]

@tmorehouse please open a separate issue.