server innerHTML: "<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.
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!
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
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:
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>