未捕获的ReferenceError:未定义React

Question

我正在尝试使用本教程使ReactJS与rails配合使用.我收到此错误:

---

Uncaught ReferenceError: React is not defined

但我可以在浏览器控制台中访问React对象
我还添加了public/dist/turbo-react.min.js,如此处所述,并//= require components在application.js中添加了一行,如本答案所述,没有运气.另外,
var React = require('react')给出错误:
Uncaught ReferenceError: require is not defined

任何人都可以建议我如何解决这个问题？

[编辑1]
参考源代码:
这是我的comments.js.jsx文件:

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

这是我的index.html.erb:

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

Answer 1

当我使用webpack在我的下面使用以下块构建我的javascript时,我能够重现此错误webpack.config.json:

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

上面的配置require('react')通过加载npm模块告诉webpack不解决,而是期望window调用一个全局变量(即在对象上)React.解决方案是删除这段配置(因此React将与您的javascript捆绑在一起)或在执行此文件之前在外部加载React框架(这样就window.React存在).

Answer 2

如果您使用的是 Babel 和 React 17，则可能需要将 "runtime": "automatic" 添加到配置中。

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

Answer 3

我收到此错误是因为我正在使用

import ReactDOM from 'react-dom'

没有导入反应,一旦我将其更改为以下:

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

错误已解决:)

Answer 4

可能的原因是1.您没有将React.JS加载到您的页面中,2.您将上述脚本加载到您的页面中.解决方案是在上面显示的脚本之前加载JS文件.

PS

可能的解决方案.

1. 如果你react在webpack配置中提到externals部分,那么你必须先将反应js文件直接加载到你的html中bundle.js
2. 确保你有线 import React from 'react';

Answer 5

如果您使用的是Webpack,则可以在需要时加载React,而无需require在代码中明确表示.

添加到webpack.config.js:

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

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

Answer 6

尝试添加：

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

在render()函数之前。

这有时可以防止错误弹出返回：

反应未定义

添加React到窗口将解决这些问题。

Answer 7

添加到Santosh:

你可以加载React

import React from 'react'

Answer 8

我知道这个问题已经有了答案。但由于对我有用的内容并不完全在答案中，因此我将其添加到此处，希望对其他人有用。

index.js当我得到时，我的文件看起来像这样Uncaught ReferenceError: React is not defined。

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

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

import React from 'react';在文件顶部添加修复了它。

现在我的index.js看起来像这样，我在控制台上没有收到任何错误。

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

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

请注意，我没有在 webpack.config.js 或其他任何地方进行任何更改来实现此功能。

Answer 9

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

这也可能有效！