Question

[Solved] Uncaught ReferenceError: React is not defined

I am trying to make ReactJS work with rails using this tutorial. I am getting this error:


Uncaught ReferenceError: React is not defined

But I can access the React object in browser consoleenter image description here
I also added public/dist/turbo-react.min.js as described here and also added //= require components line in application.js as described in this answer to no luck. Additionally,
var React = require('react') gives the error:
Uncaught ReferenceError: require is not defined

Can anyone suggest me on how to resolve this?

[EDIT 1]
Source code for reference:
This is my comments.js.jsx file:

var Comment = React.createClass({
  render: function () {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
          {this.props.comment}
      </div>
      );
  }
});

var ready = function () {
  React.renderComponent(
    <Comment author="Richard" comment="This is a comment "/>,
    document.getElementById('comments')
  );
};

$(document).ready(ready);

And this is my index.html.erb:

<div id="comments"></div>

Solution #1:

I was able to reproduce this error when I was using webpack to build my javascript with the following chunk in my webpack.config.json:

externals: {
    'react': 'React'
},

This above configuration tells webpack to not resolve require('react') by loading an npm module, but instead to expect a global variable (i.e. on the window object) called React. The solution is to either remove this piece of configuration (so React will be bundled with your javascript) or load the React framework externally before this file is executed (so that window.React exists).

Respondent: Barnasaurus Rex

Solution #2:

I got this error because I was using

import ReactDOM from 'react-dom'

without importing react, once I changed it to below:

import React from 'react';
import ReactDOM from 'react-dom';

The error was solved 🙂

Respondent: Akshat Gupta

Solution #3:

If you are using Webpack, you can have it load React when needed without having to explicitly require it in your code.

Add to webpack.config.js:

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

See http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

Respondent: Jephir

Solution #4:

Possible reasons are 1. you didn’t load React.JS into your page, 2. you loaded it after the above script into your page. Solution is load the JS file before the above shown script.

P.S

Possible solutions.

  1. If you mention react in externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js
  2. Make sure you have the line import React from 'react';
Respondent: J Santosh

Solution #5:

Try to add:

import React from 'react'
import { render } from 'react-dom'
window.React = React

before the render() function.

This sometimes prevents error to pop-up returning:

React is not defined

Adding React to the window will solve these problems.

Solution #6:

Adding to Santosh :

You can load React by

import React from 'react'
Respondent: Imamudin Naseem

Solution #7:

If you are using Babel and React 17, you might need to add “runtime”: “automatic” to config.

 {
     "presets": ["@babel/preset-env", ["@babel/preset-react", {
        "runtime": "automatic"
     }]]
 }
Respondent: Jkarttunen

Solution #8:

import React, { Component, PropTypes } from 'react';

This may also work!

Respondent: Abraham Jagadeesh

Solution #9:

I got this error because in my code I misspelled a component definition with lowercase react.createClass instead of uppercase React.createClass.

Respondent: nomad

Solution #10:

I was facing the same issue.
I resolved it by importing React and ReactDOM like as follows:

import React from 'react';
import ReactDOM from 'react-dom';
Respondent: anand shukla

Solution #11:

The displayed error

after that import react

Finally import react-dom

if error is react is not define,please add ==>import React from 'react';

if error is reactDOM is not define,please add ==>import ReactDOM from 'react-dom';

Respondent: Rainy

Solution #12:

If you’re using TypeScript, make sure that your tsconfig.json has "jsx": "react" within "compilerOptions".

Respondent: pseudosudo

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy