Vue: ssr unexpected hydration bailout with <pre> tag

Created on 28 Jun 2017 · 4Comments · Source: vuejs/vue

Version

2.3.4

Reproduction

Here what happens on F5 (reload) key:
ssr_pre_tag_issue
(It happens only once, the video is looped)

Steps to reproduce

Add a <pre> tag in App.vue of the vue-hackernews-2.0 demo:

<template>
  <div id="app">
    <header class="header">
    <pre style="background-color: #aaa">
foobar
    </pre>
      <nav class="inner">

What is expected?

client-side and server-side have the same version for the <pre> tag

What is actually happening?

client and server side versions are not the same, then bailout ?, then <pre> tag content is flickering

bug

Source

FranckFreiburger

Most helpful comment

@FranckFreiburger This seems to be a bug. According to the specification https://www.w3.org/TR/html5/syntax.html#element-restrictions

A single newline may be placed immediately after the start tag of pre and textarea elements. If the element's contents are intended to start with a newline, two consecutive newlines thus need to be included by the author.

The first line break immediately following the pre tag is ignored, while the vue html compiler seems not.

I'll try to fix it.

defcc on 3 Jul 2017

👍3

All 4 comments

Thanks @FranckFreiburger , I try to reproduce the issue on Mac and windows, both ok. Will you please provide more information? And for F5 key, what do you mean it by that, F5 to reload the page?

defcc on 1 Jul 2017

Windows 7, node v8.1.2, tested with latest Google Chrome & Firefox.
After cloning vue-hackernews-2.0 demo, I just modified the App.vue to add the <pre> tag.
Then I run npm run dev, and the first time the page is loaded, the issue happens (and the issue happens again on page reload)

Using google dev tools,
When I pause the script execution just before the issue, the markup (in the dev tools Elements tab) is:

<pre style="background-color:#aaa;">foobar
        </pre>

When I continue the script execution, the markup become:

<pre style="background-color:#aaa;">
foobar
        </pre>

The data from the network tab seems correct, the initial HTTP GET request contains:

<pre style="background-color:#aaa;">
foobar
        </pre>

note: the issue does not happens with <div style="white-space:pre;"> instead of <pre>

FranckFreiburger on 1 Jul 2017

Thanks, got it. I am trying to look into it.

defcc on 3 Jul 2017

@FranckFreiburger This seems to be a bug. According to the specification https://www.w3.org/TR/html5/syntax.html#element-restrictions

A single newline may be placed immediately after the start tag of pre and textarea elements. If the element's contents are intended to start with a newline, two consecutive newlines thus need to be included by the author.

The first line break immediately following the pre tag is ignored, while the vue html compiler seems not.

I'll try to fix it.

defcc on 3 Jul 2017

👍3

Was this page helpful?

0 / 5 - 0 ratings