10000 Uncaught Invariant Violation: React DOM tree root should always have a node reference. · Issue #7103 · facebook/react · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Uncaught Invariant Violation: React DOM tree root should always have a node reference. #7103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
f0rr0 opened this issue Jun 22, 2016 · 3 comments
Closed

Uncaught Invariant Violation: React DOM tree root should always have a node reference. #7103

f0rr0 opened this issue Jun 22, 2016 · 3 comments

Comments

@f0rr0
Copy link
f0rr0 commented Jun 22, 2016

Rendering the following react-router (v2.4.1) component on the server using renderToString (v15-rc.1) causes this error message to be logged in the Chrome (v51) console.

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/about" component={About} />
    </Route>
  </Router>
);

The error does not get logged on the index route. But thereafter, navigating between the two routes causes the error to be logged.

The html served dynamically looks like this:

<div id="root">
    <div  data-reactroot="" data-reactid="1" data-react-checksum="534581471"><!-- react-empty: 2 -->
      <main data-reactid="3">
        <div data-reactid="4">
          <p data-reactid="5">Stuff</p>
            <a href="/about" data-reactid="6">Click</a>
            <div data-reactid="7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sint, totam ea quam iusto illum necessitatibus ad pariatur quos, provident ipsum adipisci deserunt voluptatum vero, eaque veniam. Reiciendis ipsam, aspernatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sint, totam ea quam iusto illum necessitatibus ad pariatur quos, provident ipsum
            </div>
        </div>
      </main>
    </div>
</div>

The client entry point looks like:

const run = () => {
  ReactDOM.render(
    router,
    document.getElementById('root')
  );
};

const loadedStates = ['complete', 'loaded', 'interactive'];

if (typeof document !== 'undefined') {
  if (loadedStates.includes(document.readyState) && document.body) {
    run();
  } else {
    window.addEventListener('DOMContentLoaded', run, false);
  }
}
@f0rr0 f0rr0 mentioned this issue Jun 23, 2016
Closed
@orioltf
Copy link
orioltf commented Jun 29, 2016 •
edited
Loading

This started happening to me once I added the EventListener. It must have to do with this.

  "dependencies": {
    "babel-polyfill": "6.9.1",
    "bean": "1.0.15",
    "bows": "1.5.0",
    "element-dataset": "1.3.0",
    "history": "2.1.1",
    "lodash.debounce": "4.0.6",
    "lodash.isequal": "4.2.0",
    "lodash.uniqueid": "4.0.0",
    "normalize.css": "4.1.1",
    "react": "15.0.2",
    "react-aria-modal": "2.3.1",
    "react-dom": "15.0.2",
    "react-image-gallery": "0.6.1",
    "react-router": "2.4.0",
    "skip-link-focus": "0.1.0",
    "whatwg-fetch": "1.0.0"
  },

@orioltf
Copy link
orioltf commented Jun 29, 2016

FYI: updating to react-router: v2.5.1 seems to have solved the issue in my case
8924

@vsiao vsiao mentioned this issue Sep 14, 2016
Closed
@gaearon
Copy link
Collaborator
gaearon commented Oct 4, 2017

This error doesn’t exist anymore in React 16.

@gaearon gaearon closed this as completed Oct 4, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@orioltf @gaearon @f0rr0
0