Uncaught ReferenceError: React is not defined

Question

Hi I know this type of question has been asked quite a few times but I couldn't get the answer.

I am trying to write a React hello world example. I have only two files one app.jsx and another homepage.jsx. I am using webpack to bundle the files.

But when I run the code I get Uncaught ReferenceError: React is not defined

My homepage.jsx looks like this

"use strict";

var React = require('react');

var Home = React.createClass({
    render : function() {
        return (
            <div className="jumbotron">                
                <h1> Hello World</h1> 
            </div>
        );
    }
});

module.exports = Home;

My app.js looks like this

var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
  <Home/>,
  document.getElementById('app')
);

In browser it throws Uncaught ReferenceError: React is not defined at line 7 ie where I am requiring homepage.

But when I add var React = require('react') in app.jsx it works fine.

I don't understand this. I have included react in homepage.jsx where I am making use of it. In app.jsx I only require react-dom becuase I don't use React. Then why it is giving error in app.jsx.

Pls help!!

Answer 1

Change your app.js to this

var React = require('react');
var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
    <Home/>,
    document.getElementById('app')
);

JSX is transformed into React.createElement() calls, thus React is required in scope. So yes, you are using React in app.js . Get used to import it whenever you use JSX or direct React.* calls.

Answer 2

You can have it without require it in your code.

Add to webpack.config.js :

plugins: [
  new webpack.ProvidePlugin({
    "React": "react",
  }),
],

See https://webpack.js.org/plugins/provide-plugin/#root