ReactJs browser Cannot read property 'keys' of undefined

Question

HTML code:

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-core/6.1.19/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX code:

// create class
var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

Console message after run:

Uncaught TypeError: Cannot read property 'keys' of undefined

Why?

there is a problem similar with yours you can find it here

chenkehxx
– chenkehxx

2016-07-05 03:12:45 +00:00
Commented Jul 5, 2016 at 3:12 — chenkehxx
– chenkehxx, Commented Jul 5, 2016 at 3:12
Version 6 doesn't work for me at all.

Vahid Amiri
– Vahid Amiri

2016-07-09 03:30:52 +00:00
Commented Jul 9, 2016 at 3:30 — Vahid Amiri
– Vahid Amiri, Commented Jul 9, 2016 at 3:30
The version of babel must be less than 6.0.0

Bhawan
– Bhawan

2017-09-19 06:17:48 +00:00
Commented Sep 19, 2017 at 6:17 — Bhawan
– Bhawan, Commented Sep 19, 2017 at 6:17

Shubham Khatri · Accepted Answer · 2017-07-31 08:34:26Z

11

I also ran into the same issue and while surfing the internet I found that there was a problem with the babel-core version that I used. I replaced that with another and got my code to work.

Try this

HTML

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX

var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

It should work for you too.

Update:

You can use babel-standalone package for babel compilation with the newer version since babel-browser is deprecated.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

edited Jul 31, 2017 at 8:34

answered Jul 5, 2016 at 5:54

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gwater17 Over a year ago

I just had the same error and found that the version of Babel for the browser we were using was deprecated. The newest version you can use in the browser is cdnjs.com/libraries/babel-standalone

Sidney Sousa Over a year ago

Indeed it works with your updated answer. Appreciate the support.

Collectives™ on Stack Overflow

ReactJs browser Cannot read property 'keys' of undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related