Issue when using react/addons, related to error reported by many others: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null #3593

shaimo · 2015-04-05T13:37:52Z

I managed to isolate the issue. I have the simplest component:

var React = require('react/addons');
var Test = React.createClass({
    render: function() {
        return <div>Hello world</div>
    }
})

module.exports = Test;

And then using it:

React.render(<Test />, document.getElementById(options.element_id));

This gives the infamous:

Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform. 
warning.js:36 
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory warning.js:48 
ReactClass.js:842 
Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

But - if you replace

var React = require('react/addons');

with

var React = require('react');

everything works fine with no errors or warnings. Is this some incompatibility with 0.13.2 and its addons part? Am I missing anything?

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

sophiebits · 2015-04-05T18:52:47Z

I don't know why this would be related to addons, but it sounds like you're using an old JSX transformer. Can you check if that's the case?

shaimo · 2015-04-05T21:27:14Z

Thanks for the reply. I'm using reactify 1.1 which seems to be the most recent one. What else should I check?
Also, as mentioned - everything does seem to work ok as long as I stick to react itself without the addons. Maybe also related - I'm unable to use react-router at all: remix-run/react-router#1035

sophiebits · 2015-04-05T21:31:15Z

Can you look at the built file? Does it have React.createElement('div', or React.DOM.div(? Similarly, Test(null), or React.createElement(Test, null)?

shaimo · 2015-04-05T21:36:40Z

Sorry for the newbie question, but I'm not sure where to find the processed file. I'm using rails with browserify and reactify and I have no idea where it puts the result js files. Can you point me to the right place? Thanks

sophiebits · 2015-04-06T01:54:30Z

You can look at the script tag in the generated HTML to see what's loaded.

ivanflorentin · 2015-04-28T10:38:38Z

I have the same problem with react-0.13.2:

index.html

<!doctype html>
<html lang="en">
        <head>
        <script src="external/react.js"></script>
        <script src="external/JSXTransformer.js"></script>
                <meta charset="utf-8">
                <title>React Test</title>
        </head>
        <body>
        <div id="app">Here goes the app</div>
        <script  type="text/jsx" src="test.js"></script>
        </body>
</html>

test.js:

/*
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                Hello, world! I am a CommentBox.
            </div>);
        }
});

React.render(<CommentBox/>,  document.getElementById('app')); 
*/

var CommentBox = React.createClass({ 
    render: function() {
        return (React.createElement('div', null, 'Hello, world! I am a CommentBox.')); 
        }
});

React.render(CommentBox(), document.getElementById('app'));

this gives me

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined

if I uncomment the upper part of the js and comment out the lower part it works.

I tried taking out JSXTransformer.js, with and without add-ons, and many other configurations without luck.

shaimo · 2015-04-28T10:44:26Z

Make sure you are indeed using the correct version of react. In my case I had 2-3 different strange issues before I found out I was using the wrong version of React because of some dependency I was not aware of. Try "npm list react" to make sure you have only one react there...

ivanflorentin · 2015-04-28T10:46:26Z

I'm using only this version for the test:
https://facebook.github.io/react/downloads/react-0.13.2.zip

shaimo · 2015-04-28T10:48:53Z

Yes, I also was sure I was only using this version, but eventually found out that was not the case because of that dependency in one of the modules I was using...

ivanflorentin · 2015-04-28T10:58:42Z

I'm not using npm, just plain HTML, a javascript file and the unpacked files from react. It works with react 0.12.2

sophiebits · 2015-04-28T18:12:07Z

@ivanflorentin Your CommentBox() should be React.createElement(CommentBox) or <CommentBox />.

@shaimo Closing because it sounds like you found your issue.

sophiebits · 2015-04-28T18:13:06Z

@ivanflorentin You should have seen a warning in the console too pointing this out.

ivanflorentin · 2015-04-29T12:56:16Z

thanks @spicyj,
changing to your sugestion gives me this:

Uncaught Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

sophiebits · 2015-04-29T18:50:12Z

@ivanflorentin Your code works fine for me here:

http://jsbin.com/venaqozebi/1/edit

If you can make a repro case in jsbin for me to look at, I'm happy to investigate.

ivanflorentin · 2015-04-29T20:12:19Z

@spicyj
yes, it works like this: React.render(<CommentBox/>, document.getElementById('app'));
but fails withReact.render(CommentBox, document.getElementById('app')); or React.render(CommentBox(), document.getElementById('app'));

sophiebits · 2015-04-29T20:15:14Z

Yes, you need to pass an element (either React.createElement(CommentBox) or <CommentBox />) to React.render.

ivanflorentin · 2015-04-29T20:19:51Z

@spicyj Thank you very much, it works now.
I have a large piece of code written in 0.12.2 and there
<script src="//fb.me/react-with-addons-0.12.2.js"></script>
and
React.render(CommentBox(), document.getElementById('app'));
works fine

guess I just have to adjust the code.
thanks again for the fast response.

sophiebits · 2015-04-29T20:31:07Z

Yes, this was a deprecation introduced in 0.12 and completely removed in 0.13. See http://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html for more details. You should have received console warnings for these when running under 0.12.

shaimo mentioned this issue Apr 5, 2015

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null AdeleD/react-paginate#8

Closed

sophiebits closed this as completed Apr 28, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue when using react/addons, related to error reported by many others: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null #3593

Issue when using react/addons, related to error reported by many others: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null #3593

shaimo commented Apr 5, 2015

sophiebits commented Apr 5, 2015

shaimo commented Apr 5, 2015

sophiebits commented Apr 5, 2015

shaimo commented Apr 5, 2015

sophiebits commented Apr 6, 2015

ivanflorentin commented Apr 28, 2015

shaimo commented Apr 28, 2015

ivanflorentin commented Apr 28, 2015

shaimo commented Apr 28, 2015

ivanflorentin commented Apr 28, 2015

sophiebits commented Apr 28, 2015

sophiebits commented Apr 28, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015

Issue when using react/addons, related to error reported by many others: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null #3593

Issue when using react/addons, related to error reported by many others: Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null #3593

Comments

shaimo commented Apr 5, 2015

sophiebits commented Apr 5, 2015

shaimo commented Apr 5, 2015

sophiebits commented Apr 5, 2015

shaimo commented Apr 5, 2015

sophiebits commented Apr 6, 2015

ivanflorentin commented Apr 28, 2015

shaimo commented Apr 28, 2015

ivanflorentin commented Apr 28, 2015

shaimo commented Apr 28, 2015

ivanflorentin commented Apr 28, 2015

sophiebits commented Apr 28, 2015

sophiebits commented Apr 28, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015

ivanflorentin commented Apr 29, 2015

sophiebits commented Apr 29, 2015