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>
This question is related to
javascript
ruby-on-rails
reactjs
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';
Adding to Santosh :
You can load React by
import React from 'react'
If you are using Babel and React 17, you might need to add "runtime2: "automatic" to config.
{
"presets": ["@babel/preset-env", ["@babel/preset-react", {
"runtime": "automatic"
}]]
}
If you're using TypeScript, make sure that your tsconfig.json
has "jsx": "react"
within "compilerOptions"
.
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 :)
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.
I got this error because in my code I misspelled a component definition with lowercase react.createClass
instead of uppercase React.createClass
.
import React, { Component, PropTypes } from 'react';
This may also work!
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';
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.
react
in externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js
import React from 'react';
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
Source: Stackoverflow.com