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.

[naimlatifi5]

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!

[Alinawaz-786]

I need your help when i was using the vue js get following error app.js:106867 [Vue warn]: Error in v-on handler: "ReferenceError: stripeResponseHandler is not defined" found in

…

---> <MessagepackageslistComponent> at resources/js/components/MessagePackagesList.vue <CreditdetailComponent> at resources/js/components/CreditDetailComponent.vue <Root> warn @ app.js:106867 logError @ app.js:108126 globalHandleError @ app.js:108121 handleError @ app.js:108081 invokeWithErrorHandling @ app.js:108104 invoker @ app.js:108421 original._wrapper @ app.js:113774 app.js:108130 ReferenceError: stripeResponseHandler is not defined at VueComponent.stripeResponse (app.js:4295) at invokeWithErrorHandling (app.js:108096) at HTMLFormElement.invoker (app.js:108421) at HTMLFormElement.original._wrapper (app.js:113774) logError @ app.js:108130 globalHandleError @ app.js:108121 handleError @ app.js:108081 invokeWithErrorHandling @ app.js:108104 invoker @ app.js:108421 original._wrapper @ app.js:113774 (index):3 Uncaught Error: Your key is invalid, as it contains whitespace. For more info, see https://stripe.com/docs/stripe.js at Function.b.validateKey ((index):3) at Function.b.create ((index):2) at Function.c.createToken ((index):2) at HTMLFormElement.<anonymous> (app.js:4222) at HTMLFormElement.dispatch (app.js:22950) at HTMLFormElement.elemData.handle (app.js:22757) how to solved thie error

On Wed, 6 Nov 2019 at 16:41, Naim Latifi ***@***.***> wrote: 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: " Hi" I want then to do some transformation in this element and add a data attribute like content:"Hi with data attribue" and render that in component with data attribute and ssr support. Any idea how can I achieve this? I appreciate any help! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6519?email_source=notifications&email_token=ANGDLPBQN732U7NMMNNJLCDQSKUNRA5CNFSM4DZWPIM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDGHTDY#issuecomment-550271375>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANGDLPC2CBYZ7AW2YYWDCRLQSKUNRANCNFSM4DZWPIMQ> .