未捕获的ReferenceError：未定义React [英] Uncaught ReferenceError: React is not defined

问题描述

我正在尝试使用

我还添加了 public / dist / turbo-react.min.js 如上所述这里并在application.js中添加了 // = require components 行，如上所述在这个答案中没有运气。另外，

var React = require（'react'）给出错误：

未捕获的ReferenceError ：需求未定义

有人可以建议我如何解决此问题吗？

参考源代码：

这是我的 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 =Richardcomment =这是评论/> ;, 
 document.getElementById（'comments'）
）; 
}; 
 
 $（document）.ready（ready）; 
  

这是我的 index.html.erb ：

 < div id =comments>< / div> 
  

解决方案

我在使用时能够重现此错误webpack用我的 webpack.config.json中的以下块构建我的javascript ：

 外部：{
'反应'：'反应'
}，
  

上面的配置告诉webpack不要通过加载npm模块来解析 require（'react'），而是期望一个全局变量（即在<$ c上） $ c> window object）名为 React 。解决方案是删除这段配置（因此React将与您的javascript捆绑在一起）或在执行此文件之前在外部加载React框架（以便 window.React 存在）。

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>

解决方案

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

这篇关于未捕获的ReferenceError：未定义React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！