domPropsInnerHTML incorrect markup

[alidcast]

I'm trying to render HTML using JSX.

For example:

  <div>
      <div domPropsInnerHTML={ this.body } />
 </div>

However I'm getting the following error:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

When I try the same exact HTML using the v-html directive in a vue template, the error disapears.

<div>
  <div v-html="body">
</div>

I would resort to using that, but I'm trying to use create a helper component for nuxtent that based on data renders a dynamic component or HTML at runtime, so that vue components could easily be used inside markdown.

[nickmessing]

Hello @alidcastano, thank you for the report but it's not enough information, can you please provide a link to repository where this happens?

[alidcast]

Here's the repo: https://github.com/nuxt-community/nuxtent.

You can see the error in action if you run the docs. Go to any documentation page and press refresh.

cd docs
npm install
npm run dev

And I provided a link to the exact place in the source code above.

Let me know if you need any other information!

[alidcast]

@nickmessing Any update on this? Just trying to see how I should update the docs for Nuxtent... 😬

[nickmessing]

@alidcastano, sorry, totally forgot about it, will take a look in the next hours.

[alidcast]

Awesome, thanks!

[alidcast]

@nickmessing Did you have a chance to look into it?

[nickmessing]

@alidcastano, unfortunately no, had really busy time at work, but looks like I will have time today

[whtsky]

Any updates on this?

[whtsky]

Found that

h('pre', {
  domProps: {
    innerHTML: 'content',
  },
})

works and

h('pre', {
  domProps: {
    innerHTML: 'content',
  },
}, [])

doesn't.

[nickmessing]

Oh, thank you for that finding, I didn't have time for this issue but since you tracked it down it can be easily fixed, thank you for the effort @whtsky.

[nickmessing]

@alidcastano, are you sure v-html works?
I get that error on both:

<template>
  <div v-html="'<h1>Hey</h1>'">Hello</div>
</template>

and

<script>
export default {
  render () {
    return <div domPropsInnerHTML={`<h2>Hey</h2>`}>Hello</div>
  }
}
</script>

Looks like an SSR issue.

[nickmessing]

Discussion continuer ad vuejs/vue#6519