Uncaught ReferenceError: React is not defined

Question

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 console
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>

Answer 1

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"}]
     ]
 }

Answer 2

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 (ie 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).

Answer 3

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 :)

Answer 4

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

Answer 5

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.

PS

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';

Answer 6

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.

Answer 7

Adding to Santosh :

You can load React by

import React from 'react'

Answer 8

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

这也可能有效！

Answer 9

I know this question is answered. But since what worked for me isn't exactly in the answers, I'll add it here in the hopes that it will be useful for someone else.

My index.js file looked like this when I was getting Uncaught ReferenceError: React is not defined .

import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById("root"));

Adding import React from 'react'; at the top of the file fixed it.

Now my index.js looks like this and I don't get any error on the console.

import React from 'react';
import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById("root"));

Please note I made no change in webpack.config.js or anywhere else to make this work.

Answer 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';

Answer 11

我收到此错误是因为在我的代码中，我拼错了使用小写react.createClass而不是大写React.createClass的组件定义。

Answer 12

如果您使用的是 TypeScript，请确保您的tsconfig.json在"jsx": "react" "compilerOptions" 。

Answer 13

I got this error because I used:

import React from 'react';

while working with React, Typescript and Parcel

Changing it to:

import * as React from 'react';

Solved the problem as suggested by https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-381817548

Answer 14

Sometimes the order of import can cause this error, if after you have followed all the steps above and still finds it hard on you, try making sure the react import comes first.

import React from 'react'
import { render } from 'react-dom'

before any other important you need to make.

Answer 15

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

if you are using react 17 and greater than this then you need to add automatic for transpiler.

Answer 16

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';

Answer 17

To whom using CRA and ended up to this question, can use customize-cra and react-app-rewired packages to override babel presets in CRA. To do this, create a config-overrides.js in the root and paste this code snippet in it.

const { override, addBabelPreset } = require('customize-cra');

module.exports = override(
    addBabelPreset('@emotion/babel-preset-css-prop'),
    addBabelPreset([
        '@babel/preset-react',
        {
            runtime: 'automatic',
            importSource: '@emotion/react',
        },
    ]),
);

And update scripts in package.json with the ones below.

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",

Answer 18

I got this because I wrote

import react from 'react'

instead of

import React from 'react'