React: React 15.0.1 Updates causing issues with DOM

[jbbae]

Hey,
So I'm a fairly new developer who had a working app until version v0.14.8, and just updated to v15.0.1 today. The update did remove a few errors/warnings I was struggling with (so a great relief there), but brought up this issue.

Specifically, the app itself renders fine, with all the pages looking fine (all components, text, etc. in the right places), but is just "frozen" - completely non-functional, not allowing me to click on anything etc.

The error message I see are as follows (from Chrome and Firefox):

I back-tracked it to where I could and found this being the part where the "node" is coming off as null:

So I have absolutely no clue what's going on and there seems to be no hint as to what exactly is causing this issue. I will try ripping the app apart and do a thorough debugging, but wouldn't expect much from it (due to my unfamiliarity with development yet...).
I really really appreciate the help in advance, and hope that this problem can contribute somewhat to improving the React ecosystem!

[roganov]

React 0.14 warns about deprecations that are removed/changed in React 15. I would suggest to resolve all the errors/warning in 0.14 and then upgrade.

[gaearon]

Please make sure you don’t have two instances of React on the same page.
npm ls react can help to determine this.

If you don’t, please share the minimal example reproducing this issue on GitHub or JSFiddle.
Thanks!

[doctyper]

I am also seeing this error, particularly in unit tests that do not unmount components after the tests complete. In these cases, the value of rootNode.parentNode is null, presumably because the node is no longer attached to the DOM. The null value is then passed into getClosestInstanceFromNode, where the error is thrown due to node being null.

My current workaround is to return null if the node is null:

if (node == null) {
    return null;
}

Which seems to work, though I admittedly don't know the full consequences for doing so. I think this is at least a candidate for an invariant warning/error.

[doctyper]

I should add, this error surfaces after testing with ReactTestUtils.renderIntoDocument, which:

1. does not have a way to unmount a test component
2. does not attach the test component to the document

I believe this would explain why parentNode would be null.

It also returns null if the node has just been created and is not yet attached to the tree.

[jimfb]

@nickbae91 @doctyper I am still unable to reproduce. Here is my fiddle: http://jsfiddle.net/jtxx6goy/ Can one of you provide a jsfiddle that demonstrates the issue?

[vinnymac]

Browser

Chrome v49

OS

OS X 10.11.4

Fiddle

https://jsfiddle.net/m1hepcr3/

Summary

I actually debugged this very issue yesterday morning while trying to upgrade to v15. The solution I came up with was to provide ReactDOM with an element that already existed in the DOM via document.getElementById.

One of the projects I work on has an old backbone codebase and it has slowly been migrated to react. The element that ReactDOM was being told to render to was a div that backbone generated via document.createElement. Previously (before I upgraded to v15) this element was never being inserted into the DOM.

My stack trace revealed that getClosestInstanceFromNode had a null node as @doctyper says above. Debugging this further I discovered that ReactEventListener.js was the one calling getClosestInstanceFromNode. If you take a look at findParent you can see where the node gets defined. In my case the rootNode was an audio element that a react class was producing. The audio element had no parentNode, and so container became null.

While debugging this issue occasionally it would just disappear, and stop reporting. I would refresh a dozen times and see the error once again.

Steps to Reproduce

1. Open Fiddle
2. Open Console
3. Press Run
4. Observe mounting... logs and errors

I couldn't get it to reproduce at first. So I started spamming the run button and eventually saw the error. For the sake of everyones sanity I added a for loop that runs the code 1000 times so everyone can easily see that this does indeed reproduce the issue.

EDIT 1

One thing I find interesting is if you edit the fiddle so that the audio element has no source elements, the errors do not appear. https://jsfiddle.net/g7esummj/

[jimfb]

I have a (relatively) consistent repro in chrome: https://jsfiddle.net/r4ewebqs/

Still unable to reproduce in Firefox.

Almost looks like it might be a chrome race condition, potentially related to garbage collection, because the hit rates go way down if you spread out the calls to ReactDOM.render temporally. But the OP suggests that they've seen the failure in firefox also.

[vinnymac]

@jimfb The OP has a screenshot of the error appearing in Firefox. I attempted your fiddle as well as my own in Safari 9.1 and Firefox 45, and did not get any errors.

@nickbae91 could you provide additional information, such as the version of the browsers you tested with?

[jimfb]

Yeah, if I upgrade from Chrome 49 (out-of-date) to Chrome 50 (latest stable), the error goes away. This is consistent with my original observation that it appeared to be a race condition potentially related to garbage collection.

I'm going to close this out as a browser bug, unless someone is able to reproduce on Chrome 50. I'd also be curious to see a firefox repro.

[zpao]

Let's be careful about assuming a GC issue / browser bug. We should be able to confidently say what specifically is at play. It could well be a bug in React (particularly around transactions, mounting, and local events)

My best guess here (especially since all the reports are for nodes that we have to add load / error listeners to directly) is that timing is at play. With the switch to createElement we'll actually kick off the fetching of resources earlier than before - instead of waiting for the browser to parse the img element and see src, we create the img and set src right there. That means we'll probably get a load event earlier. How early and is it possible for that event to fire before we actually attach a listener to that node is the question, and what impact does it actually have. Does it only happen on updates? Are there other events actually at play?

One thing I find interesting is if you edit the fiddle so that the audio element has no source elements, the errors do not appear

This would support my theory here as you won't get at least some of the media events.

[vinnymac]

@jimfb I can confirm. Upgraded to Chrome 50 and I am no longer able to reproduce the issue. Hoping we can get some other reproductions of this from the OP. @nickbae91 was the only one to report seeing this elsewhere. In the meantime I'll think about a way to support @zpao's theory.

EDIT 1

@zpao I saw this error once again using Chrome v50. I was on a train and my battery was dying so I didn't have time to take a screenshot of it. I will see if I can reproduce it again, although this lends to the idea that it is timing related. I was not using our fiddles, but instead one of the closed source projects I work on. It occurred during initial page load.

EDIT 2

I finally saw the error again during startup. I have yet to debug it, but here is some proof.

[jmullo]

I also bumped into something similar with unit tests running in PhantomJS 2.1.1 after upgrading to React 15.1.0. Worked fine in 0.14.8:

undefined is not an object (evaluating 'node[internalInstanceKey]')
getClosestInstanceFromNode@...
getInstanceFromNode@...

[gaearon]

Please try to provide a minimal example reproducing this.

[jmullo]

Seems to be some kind of timing issue, as the cases pass if I delay calls to ReactTestUtils.Simulate.focus() or ReactTestUtils.Simulate.click().

[haibo3318]

I also saw this error when rendering img. But when I remove the "src" attribute in img, this error disappeared.

This error only exist when using npm package with webpack. Everything is OK with individual build.

[torarnek]

I can confirm that several of our mobile users on Android, using Chrome 34.0.1847, are getting this error. We are on React 15.1.0 and webpack.

Stacktrace can be found on: https://my.trackjs.com/shared/NWEwNzhlMjQ0ZGZlNDFlYmJmNjAwYWJkNTVkMWIyMzc

[jimfb]

@torarnek There is very little we can do without a repro. If you can share the code where this is occurring, we can dig deeper. Otherwise, this is inactionable.

haibo3318 mentioned that things appeared to work with the individual builds / bower builds. Do you find the same to be true?

[gauravChaturvedi]

I'm facing the same issue, albeit for me it is occurring due to a video tag.

[gauravChaturvedi]

I was able to solve this by doing the following:

Instead of declaring my parent HTML Node inside index.html as :-

```

I removed the div tag from index.html and added the div from my js code as follows :- 

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(, root);
```

Hope this works for others as well !

[gaearon]

@gauravChaturvedi Can you share a minimal project that reproduces the problem?

[torarnek]

This problem was introduced by using Redux connect on various sub-components, and since this was a critical production feature, we did a quick refactoring to only connect the main component, and now it seems to be working fine.

The problem seems affect media tags when doing batch updates. See my previous stacktrace.

[gaearon]

Unfortunately until somebody can share a reproducing example we will be left guessing as to what it is. It would really help if you could spare a few hours to find a minimal reproducing sample. Hopefully React saved you more than a few hours so that seems fair :-)

[torarnek]

Hey Dan, if I knew how to create a reproducible example I would have definitely made one (you guys deserve it), however in our case only android mobile users with a certain Chrome browser got this issue. I tried to reproduce with the android emulator, but was not able to get the error. So I am sorry about that.

[gaearon]

This is very helpful info, thanks for sharing! Maybe somebody else will be able to use it to publish a case reproducing on Androids.

[vinnymac]

Summary

I stopped seeing it in Chrome 50+, and have not been able to reproduce the issue since. I use sentry to track errors in several of my projects. I can see the same audio element issue above occurring for certain users, and have compared the stack traces.

Insight

These users were running Opera 38.0.2220.31 and IE 11.0. They were using Windows 7 at the time. They were all running v15.1.0 of React. Several months of stack traces and no other browser has reported this error. I don't have many mobile web users (native apps), so I wouldn't expect to see those browsers reported (<1%).

Example Stack Trace

TypeError: Cannot read property '__reactInternalInstance$1yks451snh16k09eiy17cik9' of null
  at Object.s [as getClosestInstanceFromNode](/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:123:18949)
  at r(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:139:26220)
  at i(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:139:26426)
  at r.perform(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:124:12191)
  at Object.batchedUpdates(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:139:26041)
  at Object.i [as batchedUpdates](/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:124:6959)
  at dispatchEvent(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:139:27375)
  at HTMLAudioElement.r(/assets/application-eebe52b07353e35ecb012c38735fcf9c.js:3:9163)

Reproduction Attempt

I spun up a VM of Windows 7 with the same versions of IE and Opera above, and ran our fiddles and attempted to reproduce to no avail. If someone wants to give this a shot on their own, you can download Opera here and a copy of Windows 7 with IE 11 here. Hopefully this new information will lead someone else to a reproduction. If anyone is keeping track of bugs and is seeing a similar browser pattern that may be useful to learn.

[johndugan]

Hi Folks,

I ran into this error too. I am using the html-webpack-plugin. I had a call for my js file in an index.template.html file I defined for the template property. Because the html webpack plugin injects the JavaScript bundle, my js file was being called twice. You can pass inject: false to the plugin's configuration object to prevent this behavior, or remove the <script> call in your template file. This will solve the error resulting from the getClosestInstanceFromNode function (if it stems from the plugin).

    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(), // https://github.com/webpack/docs/wiki/optimization
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.template.html',
            inject: false,
            minify: {
                collapseWhitespace: true
            }
        })
    ]

Below are some screenshots to clarify.

_Note the explicit_ <script> _tag in my index.template.html file._

_Note that I am accepting the default_ inject: true _behavior of the html webpack plugin._

_Note the two_ <script> _calls._

[joshunger]

React: 15.3.2
Browsers: Google Chrome 56.0.2913.3 and FireFox 52.0a1 (2016-11-02) (64-bit)

1. Cause an uncaught exception inside of mapStateToProps. In a lot of scenarios, this is never printed to the console. I don't have a repro on this bug. So you think everything is working.
2. If this happens, you can easily reproduce this bug with an image load or any other tag that produces an event.

Since I'm using babel browser you see the exception, but in a lot of cases you don't see it.
https://jsfiddle.net/joshunger/pqtvx3dz/1/

[nikhilgoud]

React:15.3.0 , webpack:1.13.1
I am fairly new to react, working on a common dialog modal, where request(ajax) response needs to be displayed,
Created a component dialog-modal(used bootstrap modal)

and I was able to get the error

All of this happened because I was removing the modal when onHide line number 8 in dialog-modal component, on changing that to just hide the error was gone. :)
Before actually committing the transaction I deleted the node from DOM.
Hope this helps some one.

[osbertngok]

I got the same error due to exactly the reason @johndugan brought up.

[sdeleon28]

This happened to me because I had an unhandled exception in the render method of a component. The error only happened in Google Console's Fetch as Google. I didn't have the appropriate polyfill for the Googlebot agent to run my code properly. In this particular case, the offending line called Array.prototype.find . Changing myArray.find(myCondition) to myArray.filter(myCondition)[0] solved the problem.

[thomas-siimpl]

The following would result in the Uncaught TypeError: Cannot read property '__reactInternalInstance$gf9gtshwv1avu0220061ug14i' of null whenever page navigating.

  render(
    <Provider store={store}>
      <App>
        <Layout user={window.env.user}>
          {components}
        </Layout>
      </App>
    </Provider>,
    document.getElementById('client')
  )

the remedy was to wrap things in one more element, new root level <div />.

  render(
    <div>
      <Provider store={store}>
        <App>
          <Layout user={window.env.user}>
            {components}
          </Layout>
        </App>
      </Provider>
    </div>,
    document.getElementById('client')
  )

[destromas1]

We are using React 15.4.0 and ReactDOM 15.4.0 with TypeScript , Webpack
Then we are transpiling to ES5 for IE11 support.

In Chrome, Edge our app works fine.
But getting error in IE11

SCRIPT5007: Unable to get property '@@__
symbol:iterator0.57059978612322841' of undefined or null reference
polyfill.min.js (7,19646)

SCRIPT5007: Unable to get property '__reactInternalInstance$5hya2doizuj5' of undefined or null reference
react-dom.min.js (13,23434)

[destromas1]

BTW , it was fixed after changing Polyfill CDN to babel-polyfill with Webpack Entry

[typify]

I had a similar issue. It was resolved as soon as I closed the Firebug window. I couldn't get to the root cause, but at least this might help others as well. Took me 2 hours to find out..

[aspiers]

I can confirm @joshunger's observation that this happens when there is an uncaught exception in mapStateToProps. I see the same thing with React 15.4.2 and Chrome 57.0.2987.110 (64-bit), i.e. the console shows this trace three times in a row:

ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$x760fmy243' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

Luckily it did then display the error caused by the bug in mapStateToProps, so I was able to locate the bug and fix it.

[lyhoanglong]

I got this error too, but dont know why this happen. This is my code

import React from 'react';
import Logo from '../styles/images/logo.svg';
import '../styles/styles.scss';

const App = props => (
  <div className="wrapper">
    <div className="logo">
      <img src={Logo} alt="logo" />
      <p>Beleaf</p>
    </div>
  </div>
);

export default App;

ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$x760fmy243' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:113)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)



md5-f572164e16ea9a22b7c02fa6d9963dac



"react": "^15.4.2",

If I removed image everything ok. Anyone know what happen here?

[destromas1]

@lyhoanglong
Why dont you use image directly inside src="../styles/images/logo.svg" something like this ?

[lyhoanglong]

@destromas1 because sometime I can reuse this image. What's wrong if I use image this way?

[ugene1213]

@lyhoanglong did you resolve your issue? I'm getting the same exact error as you and it appears every time I try to render an image

[lyhoanglong]

@ugene1213 I didnt and dont know how to fix this.

[divyanshupathak]

Hi @lyhoanglong
remove import Logo from '../styles/images/logo.svg'; and try to pass the src of image or filecursor by using props from its parent component or if there is no parent component of it, then try to load the image from db and pass it in src.

[lasfin]

Got the same error (when navigate to another page of app by clicking to link). Can fix it by changing root node className, but it isn't possible in my case.

[dervalp]

Hi,

Got the same kind of error with an img element.

ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$c12uup2dzwt' of null

import React from 'react';
import LogoImage from './Logo.png';


const Logo = () => {
  return (
    <div>
      <img src={LogoImage} alt="Logo"/>
    </div>
  )
};

I am using url-loader but even if I am hardcoding the value of the src attribute, I get the error.

"react": "^15.5.4",
"react-dom": "^15.5.4",

"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-jest": "^11.0.1",
"babel-loader": "^7.0.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"prop-types": "^15.5.8",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"

EDIT:

If I replace the image with a DIV and use the image as background, no issue. Weird stuff, as I have the impression it is something I have done for the passed 3 years without issue.

logo: {
    height: '30px',
    background: `url(${LogoImage})`,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
},

[alexandernanberg]

I hade the exact same issue, the problem for me was that I included the javascript files multiple times as @johndugan pointed out. Would it be possible for React to throw a warning if it senses that it's included multiple times?

[aeruhxi]

import React, { Component } from 'react';
import '../../assets/css/global.css';

import album from '../../assets/images/albumarts/1.jpg';

class App extends Component {
  render() {
    return (
      <div>
        <img src={album} />
      </div>
    );
  }
}

export default App;

I get the error when I try to render <img> with src in electron 1.6.10 with webpack. Image is rendered properly but I have the following error message:

Uncaught TypeError: Cannot read property '__reactInternalInstance$hxij9j4p7zw9xr0fm8fflxr' of null
    at Object.getClosestInstanceFromNode (eval at ../../node_modules/react-dom/lib/ReactDOMComponentTree.js (bundle.js:2411), <anonymous>:113:11)
    at findParent (eval at ../../node_modules/react-dom/lib/ReactEventListener.js (bundle.js:2587), <anonymous>:38:32)
    at handleTopLevelImpl (eval at ../../node_modules/react-dom/lib/ReactEventListener.js (bundle.js:2587), <anonymous>:67:28)
    at ReactDefaultBatchingStrategyTransaction.perform (eval at ../../node_modules/react-dom/lib/Transaction.js (bundle.js:2907), <anonymous>:140:20)
    at Object.batchedUpdates (eval at ../../node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js (bundle.js:2539), <anonymous>:62:26)
    at Object.batchedUpdates (eval at ../../node_modules/react-dom/lib/ReactUpdates.js (bundle.js:2763), <anonymous>:97:27)
    at dispatchEvent (eval at ../../node_modules/react-dom/lib/ReactEventListener.js (bundle.js:2587), <anonymous>:147:20)

[locomotif]

I am having the same issue around the <img src=".." /> tag on a SPA.
@gaearon I have created a minimal project to reproduce the issue.

Chrome: Version 58.0.3029.110 (64-bit)

Thanks!

File structure

|-- .babelrc
|-- app
    |-- app.jsx
    |-- index.ejs
|-- package.json
|-- public
|-- webpack.config.js

app.jsx

// app.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
        return (
            <img src="https://facebook.github.io/react/img/logo.svg" />
        );
    }
}

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

webpack.conf.js

// webpack.conf.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'app'),
    entry: {
        app: './app.jsx'
    },
    output: {
        filename: 'js/[name].js',
        chunkFilename: 'js/[id].js',
        path: path.resolve(__dirname, 'public')
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader' },
                        { loader: 'sass-loader' }
                    ]
                })
            },
            {
                test: /\.(js|jsx)$/,
                use: [{ loader: 'babel-loader', }],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|svg)$/,
                use: [{ loader: 'file-loader?name=images/[name].[ext]' }]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('css/[name].css'),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.ejs'
        })
    ]
};

.babelrc

{
    "presets":[ 
        "es2015",
        "react"
    ],
    "plugins":[
        "transform-object-rest-spread"
    ]
}  

package.json

{
  "name": "example",
  "version": "0.0.1",
  "description": "img src issue",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "scss-loader": "^0.0.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {}
}

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Img src issue</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

[locomotif]

Also, I confirmed @doctyper findings that rootNode.parentNode is null. I did a similar workaround in react-dom/lib/ReactEventListner.js , function findParent(). I added the following, just so that I can bypass the error:

  if (container) {
      return ReactDOMComponentTree.getClosestInstanceFromNode(container);
  } else {
      return null;
  }

I am just beginning to learn react, so I am not sure exactly what is happening and why there is a unmounted node looking for a parent.

[cdaringe]

I haven't pin-pointed it, but i'm with @locomotif--for me the single change that either creates or eliminates the failure is the src attribute on the image tag.

it's not a minimum viable example, but it is _rather small_--almost === CRA barebones. if one:

• clones this snapshot
• runs yarn && yarn start, you can see the error
• fiddle with the <App /> component's image to see it get weird.

[cdaringe]

it appears that rootNode isn't guaranteed to be mounted on the DOM after calling getNodeFromInstance from within findParent.

consequently, sniffing for rootNode's .parentNode yields null.

missing from above, rootNode.id === 'id'