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

TimoRuetten · 2017-09-27T15:55:53Z

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.

The text was updated successfully, but these errors were encountered:

TimoRuetten · 2017-09-27T15:59:06Z

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.

gaearon · 2017-09-27T16:01:23Z

@sebmarkbage Would you say it's expected?

TimoRuetten · 2017-09-27T16:11:13Z

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.

aweary · 2017-09-27T16:15:55Z

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.

TimoRuetten · 2017-09-27T16:18:05Z

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 · 2017-09-27T16:27:33Z

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

sebmarkbage · 2017-09-27T16:54:29Z

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.

johnnyreilly · 2017-10-31T06:28:49Z

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

nitish24p · 2017-10-31T09:26:11Z

Yup same issue here too..

gaearon · 2017-10-31T09:32:32Z

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.

nitish24p · 2017-10-31T09:39:05Z

@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?

gaearon · 2017-10-31T09:45:55Z

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

nitish24p · 2017-10-31T09:48:14Z

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.

syranide · 2017-10-31T10:32:17Z

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.

ideal-life-generator · 2017-11-09T17:37:24Z

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

pramodsvidyarthi · 2017-11-17T16:29:07Z

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

nitish24p · 2017-11-17T17:26:01Z

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

pramodsvidyarthi · 2017-11-18T09:07:50Z

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

See: facebook/react#10879

vinaycoder · 2018-11-15T16:58:50Z

This issue is generated by the blank white space.

${content}

to replace

${content}

I have solve my issue using this

sayjeyhi · 2019-12-25T13:28:40Z

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

denys-kohut · 2020-01-20T10:59:21Z

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

stale · 2020-04-19T11:58:39Z

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 · 2020-04-26T12:22:35Z

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!

tlenoir · 2020-05-13T03:33:09Z

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 ! 👍

Shapokhan · 2020-09-11T16:02:43Z

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..

webuniverseio · 2021-03-13T23:50:57Z

If you run into this issue because you use express-react-views with beautify option, you can use directives for those parts that you plan to hydrate.

mlshohet · 2021-04-06T02:53:38Z

This only happens when I reload and have the Dev Tools open. The page reloads fine when they are closed. Nothing else works for me.

RobertSandiford · 2021-11-12T02:35:47Z

This remains a niggle in 2021 for development.

EDIT: Just remove the whitespace in the browser:

if ( isDev ) {
    root.innerHTML = root.innerHTML.replace(/(?<=>|^)\s+(?=<|$)/g,'')
}

TimoRuetten closed this as completed Sep 27, 2017

sebmarkbage reopened this Sep 27, 2017

gaearon added the Type: Feature Request label Oct 3, 2017

gaearon changed the title ~~"Did not expect server HTML to contain the text node" in React 16~~ "Did not expect server HTML to contain the text node" due to whitespace in React 16 Oct 3, 2017

andregoncalvesdev mentioned this issue Nov 24, 2017

feat: rendering to a node stream moxystudio/react-with-moxy#38

Open

guilherme added a commit to sebglazebrook/frontend-boilerplate that referenced this issue Aug 4, 2018

Removing Warning: Did not expect server HTML to contain the text node

d205e35

See: facebook/react#10879

pisacode mentioned this issue Aug 4, 2018

Did not expect server HTML to contain a <nav> in <div> cleverbeagle/pup#199

Closed

MortezaT mentioned this issue Oct 7, 2018

replace loadable-content with react-loadable wellyshen/react-cool-starter#198

Merged

drex44 mentioned this issue Oct 27, 2018

Did not expect server HTML to contain a <span> in <div> using redux-saga vercel/next.js#5367

Closed

bvaughn mentioned this issue Jan 15, 2020

Warning: Did not expect server HTML to contain the [first prerendered] text node "[chinese characters]" #17846

Closed

stale bot added the Resolution: Stale Automatically closed due to inactivity label Apr 19, 2020

stale bot closed this as completed Apr 26, 2020

ardydedase pushed a commit to ardydedase/cookiecutter-express-react-ssr that referenced this issue Aug 5, 2020

fix browser error message: facebook/react#10879

3a65651

ZeeshanTamboli mentioned this issue May 13, 2023

Do not let white space or newlines in root element impact SSR and client hydration when using hydrateRoot mui/material-ui#36623

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TimoRuetten commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

gaearon commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

aweary commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

sebmarkbage commented Sep 27, 2017 •

edited

johnnyreilly commented Oct 31, 2017

nitish24p commented Oct 31, 2017

gaearon commented Oct 31, 2017 •

edited

nitish24p commented Oct 31, 2017 •

edited

gaearon commented Oct 31, 2017

nitish24p commented Oct 31, 2017

syranide commented Oct 31, 2017

ideal-life-generator commented Nov 9, 2017

pramodsvidyarthi commented Nov 17, 2017 •

edited

nitish24p commented Nov 17, 2017

pramodsvidyarthi commented Nov 18, 2017

vinaycoder commented Nov 15, 2018

sayjeyhi commented Dec 25, 2019

denys-kohut commented Jan 20, 2020

stale bot commented Apr 19, 2020

stale bot commented Apr 26, 2020

tlenoir commented May 13, 2020 •

edited

Shapokhan commented Sep 11, 2020

webuniverseio commented Mar 13, 2021

mlshohet commented Apr 6, 2021

RobertSandiford commented Nov 12, 2021 •

edited

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

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

Comments

TimoRuetten commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

gaearon commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

aweary commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

TimoRuetten commented Sep 27, 2017

sebmarkbage commented Sep 27, 2017 • edited

johnnyreilly commented Oct 31, 2017

nitish24p commented Oct 31, 2017

gaearon commented Oct 31, 2017 • edited

nitish24p commented Oct 31, 2017 • edited

gaearon commented Oct 31, 2017

nitish24p commented Oct 31, 2017

syranide commented Oct 31, 2017

ideal-life-generator commented Nov 9, 2017

pramodsvidyarthi commented Nov 17, 2017 • edited

nitish24p commented Nov 17, 2017

pramodsvidyarthi commented Nov 18, 2017

vinaycoder commented Nov 15, 2018

sayjeyhi commented Dec 25, 2019

denys-kohut commented Jan 20, 2020

stale bot commented Apr 19, 2020

stale bot commented Apr 26, 2020

tlenoir commented May 13, 2020 • edited

Shapokhan commented Sep 11, 2020

webuniverseio commented Mar 13, 2021

mlshohet commented Apr 6, 2021

RobertSandiford commented Nov 12, 2021 • edited

sebmarkbage commented Sep 27, 2017 •

edited

gaearon commented Oct 31, 2017 •

edited

nitish24p commented Oct 31, 2017 •

edited

pramodsvidyarthi commented Nov 17, 2017 •

edited

tlenoir commented May 13, 2020 •

edited

RobertSandiford commented Nov 12, 2021 •

edited