Probably related to #6490?

@yyx990803, yes, it's same error.

@yyx990803, thank you, will check with JSX

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

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

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

@tmorehouse please open a separate issue.

Hi,
I have an issue when working on transforming data that I receive from server. Let's say that server send data as string html content: <h1>Hi<h1> I want then to do some transformation in this element and add a data attribute like content: <h1 data-name="title">Hi with data attribue</h1> and render that in component with data attribute SSR .
Any idea how can I achieve this?
I appreciate any help!