React DOM tree root should always have a node reference #6232
Comments
|
I'm also experience this issue when rendering server-side |
|
I'm also getting this issue since updating to React 15. The only solution I can find is (while using flux) wrapping the All it does it prevent the state-changing code to be "reached" by the server. I put all my state-changing code in that function, including setting a cookie. This way, server never touches it. |
|
@mbrio @JacksonGariety What browser are you guys using? Any chance you were using Chrome 49? We've seen a similar bug (#6472) and I'm unable to reproduce in Chrome 50, so I'm wondering if this might just have been a chrome bug. @mbrio @JacksonGariety Can either of you provide a jsfiddle that demonstrates the issue? You can fork http://jsfiddle.net/9kungxn4/ and use |
|
@jimfb if you update the files on your server to react 15.0.1 I think you'll see the error in this fiddle I made: http://jsfiddle.net/v509v7Lm/3/ |
|
Using v15.0.1, I get that event emitter is not defined: https://jsfiddle.net/ft5xeugv/ |
|
Using EventEmitter from CDN, I don't seen any errors: https://jsfiddle.net/dv85q3w2/ |
|
+1? @jimfb, did you succeed to reproduce? I have the same problem with server-side rendering since I have update from 0.14.7 to 15.0.1:
|
|
I am also getting the same error for SSR after updating to |
|
@damienleroux @gbhrdt I am not sure. We have a couple of fairly complicated repros (100-ish lines, with dependencies like ReactRouter and Redux) of a similar bug which may or may not be related. We don't yet have any repro that is super simple/actionable and demonstrates a bug in React as oppose to ReactRouter/Redux. So to answer your question, if you can provide a simple Repro, that would still be super helpful, otherwise we will look at the other issues (#6538 and #6371) and loop back to this one later. |
|
@damienleroux @gbhrdt Ok, the repro that we have for the other issues is NOT related to anything dealing with SSR, so yes, we still need a repro of this! |
|
I've got same problem in Firefox. But there's no errors in Chrome. It possibly could be related with NODE_ENV = production|development and minification, I'm still trying to find out |
|
I'm getting this on the server-side using import React from 'react';
import { renderToString } from 'react-dom/server';
const El = React.createClass({
getInitialState() {
return { foo: 'bar' };
},
componentWillMount() {
setTimeout(() => this.setState({ foo: 'baz' }), 1000);
},
render() {
return (
<span>{ this.state.foo }</span>
);
}
});
const html = renderToString(<El />);
console.log(html);Compile w/ babel, then run: Note that the error is thrown after 1 second, in the |
I feel like setState should not be called in a Sounds like a usage error to me. Perhaps we could warn in this case, but I don't think this was ever a supported pattern. I'm assuming we have a regression not related to setting state after a component has rendered. If everyone above is seeing this behavior as a result of something like @TooTallNate's example, I think we could just close out this error (or warn in this situation). |
|
It sounds like To explain my situation a bit, I would like to find a good pattern to allow the server-side to wait for this component to "resolve", so-to-speak, before calling |
|
@TooTallNate Yeah, there are a bunch of people who want features like that. See #6481 and #1739. Short answer is: "no, we don't have a good solution for that". |
|
I'm also noticing this problem server side with a pattern similar to @TooTallNate. My specific case is trying to use react-router server side with async routes (we too want to wait for components to resolve due to code splitting etc.). When using async routes in react-router (aka getComponent, getIndexRoute, getChildRoutes, etc), the component will not immediately render since the route has not resolved as shown here. Later, when the route resolves, the state is set via an event listener that was attached in componentWillMount as shown here. On the client, this is no problem as the component renders again, but on the server, the render does not run again and the error is thrown. I realize this possibly should be addressed within react-router but thought I'd chime in since it seems relevant to the conversation. |
|
@03eltond The code you linked calls |
|
I maybe have one... If you try to render this code on the server (I know rendering it on the server exactly in this setup doesn't make a lot of sense) I get the same error, but I'm not sure how Firebase does it's thing because it's minified. |
|
@fahrradflucht I think that's basically the same as what @TooTallNate posted since you're calling |
|
@jimfb a few lines up you can see the setState is actually wrapped in an event listener and is thus async and similar to calling with setTimeout. |
As a side note, in React Starter Kit we discourage developers from making React components render asynchronously in favor of having all the async logic at the routing level. Here is an example of a typical app route (compatible with universal-router): import fetch from '../../core/fetch';
import Layout from '../../components/Layout';
import Post from './Post';
export default {
path: '/posts/:id',
async action({ params }) {
const resp = await fetch(`/api/posts/${params.id}`);
const data = await resp.json();
return {
title: data.title,
component: <Layout><Post {...data} /></Layout>
}
}
} |
The best thing to do is to look through your component tree prior to rendering. For data fetching, I have used tricks like static properties (applied via a decorator) on my components ( What would be better is async property or |
|
As @timdorr says, with React Router, I don't think we can move that |
|
The repro case that @TooTallNate posted does throw this error in v15 but also throws an error in 0.14.7:
We want to add a warning when calling setState after a server render (#5473) but at least that case isn't a regression. I'll look into some of these others in a bit. |
|
@JacksonGariety After cloning your repo (and manually installing babel-plugin-transform-object-rest-spread, chalk, lodash) I can load http://127.0.0.1:1337/ without errors. Am I doing something wrong? |
|
Can anyone here give repro instructions for an example that works fine in 0.14 but is broken in 15? Small repro cases (ex: jsfiddle) preferred but I can also work with a full app to clone. Otherwise, I'll close this issue because all the cases I've tried so far do not repro or were also "broken" in 0.14. |
|
@spicyj remove this conditional and try again: https://github.com/JacksonGariety/topsters2/blob/master/src/Components/Chart.js#L21 The error is specifically caused by |
|
I was having the same issue then I decided to remove parts of my project until I figured out what could be causing the issue. This are the lines that are causing it for me, removing them everything worked fine: if (index === posts.length - 1) {
this.props.relay.setVariables({
pageSize: posts.length + pageSize
});
}Here's a more complete version of the React component with those lines so you can try to reproduce it: Edited for clarity |
|
I had this issue while using |
|
Not sure if this is relevant here, but it might help someone: I solved this on my react-router (non redux) SSR project by switching some |
|
@nossila having the same issue.l,also using react list. Have you found any solution? |
|
I'm hitting this error when I call export default function openReactModal(componentFn, modalProps={}) {
let reactRoot = document.createElement('div');
document.body.appendChild(reactRoot);
const close = () => {
if(reactRoot === null) {
console.warn('You shouldn\'t call close() more than once');
return;
}
ReactDOM.unmountComponentAtNode(reactRoot);
reactRoot.parentNode.removeChild(reactRoot);
reactRoot = null;
};
ReactDOM.render(<Modal isOpen={true} {...modalProps}>{componentFn({close})}</Modal>, reactRoot);
}Why can't I unmount a root component? |
|
I'm hitting the same issue as @mnpenner. |
|
I ended up working around this by wrapping the |
|
@mhuggins Your work around helped me too. |
|
I was having the same problem and after reading a few comments I understood the problem. Adding |
|
|
|
@rafaelbiten thanks I had the same problem and your solution seems to work. Do you know why your solution works? Because in my case I'm 100% certain I'm not calling twice the closePortal hook and it still fails. Wondering if it's not some kind of event bubbling from |
|
@mhuggins Thanks, |
|
for those who still facing this problem, I've faced the same issue and non of the above worked with me. What fixed it is using https://github.com/cloudflare/react-gateway which provides rendering outside the parent. |
|
I thought "server side rendering" was side effects free. But apparently not. We use it to inject content into Leaflet popovers, it just happens that during a cycle of Parent.setState, the Parent rerenders itself, which triggers the componentDidMount of a child component (the Map wrapper) ... The map wrapper create clusters and create the associated popovers, by calling ReactDOMServer.renderToStaticMarkup() on a bunch of stuff. And these all trigger the I should probably be able to make a small repro project. With theses steps. edit: only on chrome though. |
|
Now I'm seeing this error, only on Chrome 59 beta. All other browsers are fine.....
|
|
Getting this error on Chrome 57 as well. Haven't made any updates / changes actually. I think React Devtools got updated yesterday. |
|
Disabling React Devtools fixed issue for me also... |
|
Disabling React Devtools worked for me as well |
|
The React DevTools issue is fixed in React DevTools 2.1.7 which will appear on Chrome addon store within an hour. You can check if it's updated yet here: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi Big thanks to @pioul who filed the bug report to DevTools ❤️ |
|
I think this was fixed in React 16. |
and others
I've built a task execution pipeline utilizing React v14 and I've begun testing it against React v15 and have noticed that all of a sudden I'm getting an invariant error: React DOM tree root should always have a node reference.
When I comment the line that is causing this error (
react/src/renderers/dom/client/ReactDOMComponentTree.js
Line 171 in 3b96650
I was able to make it work with a hacky bit of code that adds properties to the instance,
_flagsand_nativeNode, you can see this here: https://github.com/mbrio/react-pipeline/blob/react-15/src/startTasks.js#L8-L9.I believe the issue is that with v14 I was able to use the server rendering code but in v15 I can no longer call
forceUpdateorsetStatewithout errors occurring. Is there a way of bypassing the above error using the client renderer, or a way of callingsetState/forceUpdatewith the server renderer?The text was updated successfully, but these errors were encountered: