React: "Did not expect server HTML to contain the text node" due to whitespace in React 16

Created on 27 Sep 2017 · 25Comments · Source: facebook/react

We have updated our React v15 Application to v16. Everything seems to work fine instead the fact that this error appears:

Warning: Did not expect server HTML to contain the text node " " in <div>.

We are using ReactDOM.hydrate and our App was completely SSR Ready in v15. I've found an old issue on Stackoverflow where someone wrote that this could be a problem with the markup which is send from Server -> Client, but as far as we can see the HTML code is the same without any markup problem.

Stale Feature Request

Source

TimoRuetten

👍88

Most helpful comment

Ok i solved it.. Sorry for the alarm

in the static markup template literal
i Changed

<body>
        <div id="root">
          ${markup}
        </div>
...

<body>
        <div id="root">${markup}</div>
...

Eliminated the whitespace in the rendering node.. And this error / warning went. Peace.

nitish24p on 31 Oct 2017

👍88 🎉27 ❤15 😄11 👎1

All 25 comments

We've found the problem. We are using this package in dev mode:
http://npmjs.com/package/pretty

When we sending the rendered HTML back to the client we prettify it. It seems that this will cause the error shown above. We will remove the prettify for now.

TimoRuetten on 27 Sep 2017

@sebmarkbage Would you say it's expected?

gaearon on 27 Sep 2017

Some infos: Before we had also issues with that in React v15. We did the prettify to the whole HTML string. The fix was just to prettify the string returned by renderToString(); But now it seems that React v6 has problems when the generated DOM is prettified.

TimoRuetten on 27 Sep 2017

When we sending the rendered HTML back to the client we prettify it.

Hey, @TimoRuetten, I'm curious what your use case is for sending prettified HTML to the client? Typically we see people taking the opposite approach and sending minified HTML to the client to reduce the payload size.

aweary on 27 Sep 2017

hey @aweary - thats absolutely true. We just do this in not production mode. Sometimes we need to take a look at the HTML send by the Server. When app is in production mode the prettify does not happen.

TimoRuetten on 27 Sep 2017

👍4

As far as I thing this is not really a real bug, so I will close this issue.

TimoRuetten on 27 Sep 2017

I think this is a reasonably legit special case that we could support.

We could be smart about in which cases text node whitespace would have semantic meaning and when it wouldn't, and ignore the warning in that case. I believe the hydration should be mostly fault tolerant to individual extra text nodes showing up because it'll look for the next node to try to hydrate it. However, I'm not sure this will need unit tests and be verified.

I don't think it's super high-pri but let me reopen this in case someone feels strongly about working on it.

It's important to get the "semantic meaning" part right so I'd expect any PR to come with a big test suite to cover whitespace edge cases.

sebmarkbage on 27 Sep 2017

👍36

Just bumped on this myself; would be awesome if this was supported!

johnnyreilly on 31 Oct 2017

Yup same issue here too..

nitish24p on 31 Oct 2017

👎2 👍2

You can express support by pressing 👍 on the issue. Please don't add "me too" comments if you don't have any particular context to share—they aren't helpful, and are spamming notifications.

gaearon on 31 Oct 2017

👍37

@gaearon i'm not using prettify package as mentioned above, but still get the same issue.
Code below

export function renderStaticMarkup(req) {

  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={ req.url } context={ context }>
      <App />
    </StaticRouter>
  );

  return `
    <html lang="en-us">
      <head>
        <meta charset="utf-8">
        <title>Title</title>
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
          ${inlinedCss}
        </style>
        <link rel="preload" as="script" href="/js/${manifestJsSrc}">
        <link rel="preload" as="script" href="/js/${vendorJsSrc}">
        <link rel="preload" as="script" href="/js/${bundleJsSrc}">
      </head>
      <body>
        <div id="root">
          ${markup}
        </div>
      <script type="text/javascript" src="/js/${manifestJsSrc}"></script>
      <script type="text/javascript" src="/js/${vendorJsSrc}"></script>
      <script type="text/javascript" src="/js/${bundleJsSrc}"></script>
      </body>
    </html>
  `;
}

Client side index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';


ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root'));

Can this be happening due to the white spaces in the template string literal above?

nitish24p on 31 Oct 2017

Please provide a complete (runnable) minimal example reproducing this, as well as a screenshot of the exact warning you get.

gaearon on 31 Oct 2017

Ok i solved it.. Sorry for the alarm

in the static markup template literal
i Changed

<body>
        <div id="root">
          ${markup}
        </div>
...

<body>
        <div id="root">${markup}</div>
...

Eliminated the whitespace in the rendering node.. And this error / warning went. Peace.

nitish24p on 31 Oct 2017

👍88 🎉27 ❤15 😄11 👎1

We could be smart about in which cases text node whitespace would have semantic meaning and when it wouldn't, and ignore the warning in that case.

@sebmarkbage You cannot realistically determine this from just looking at the HTML. Put a white-space: pre on the document-level and all white-space will affect rendering. Involving CSS-rules seems fragile.

I'm entirely certain there are no prettifiers that account for this. So really, serving prettified generated HTML is "unsafe" and there is no guarantee that it will not affect rendering.

syranide on 31 Oct 2017

I my case I just replace <div id="app" /> to <div id="app"></div>.

love-intent on 9 Nov 2017

using <div id="app">${markup}</div> and issue still persists

pramodsvidyarthi on 17 Nov 2017

👍19

@pramodsvidyarthi eliminate all possible whitespace.. also if you're using react 16.. you must be using the hydrate fn.

nitish24p on 17 Nov 2017

@nitish24p I am using the hydrate fn on the client side and i don't have any lint issue as such for whitespace.

pramodsvidyarthi on 18 Nov 2017

👍2

This issue is generated by the blank white space.

${content}

to replace

${content}

I have solve my issue using this

vinaycoder on 15 Nov 2018

In my case it was because of using PersistGate and react-loadable. if you using this libraries, you could use preloadAll instead of preloadReady

sayjeyhi on 25 Dec 2019

In my case, I've just removed mode: 'development', from my webpack config.

kohut-denis on 20 Jan 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

stale[bot] on 19 Apr 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

stale[bot] on 26 Apr 2020

Hi there, sometimes this warning appear when you close your component like this : <MyCustomComponent />. So just rewrite like <MyCustomComponent></MyCustomComponent>. Hope I've helped you guy ! :+1:

tlenoir on 13 May 2020

Ok i solved it.. Sorry for the alarm

in the static markup template literal
i Changed
<body>
        <div id="root">
          ${markup}
        </div>
...
to
<body>
        <div id="root">${markup}</div>
...
Eliminated the whitespace in the rendering node.. And this error / warning went. Peace.

Thank you brother, this works for me..