未捕获的引用错误：React未定义。

Question

我正在尝试使用这个教程将ReactJS与rails结合使用。但是我遇到了以下错误：

---

Uncaught ReferenceError: React is not defined

但我可以在浏览器控制台中访问React对象。
我还按照此处所述添加了public/dist/turbo-react.min.js，并在application.js中添加了//= require components行，如此答案所述，但没有运气。另外,
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>

- sky_coder123

---

针对2021年使用Webpack的读者：https://dev59.com/ClwY5IYBdhLWcg3w5raq#64994595 - VimNing

在我的情况下，缺少了一个导入：import React from 'react'。 - Nir Alfasi

Answer 1

如果你正在使用 Babel 和 React 17，你可能需要在 Babel 配置中添加 "runtime": "automatic"。

在 .babelrc 配置文件中，应该这样写：

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

- Jkarttunen

---

谢谢，这样做可以完成工作。我只是想知道它为什么比在Webpack配置中使用“ProvidePlugin”将React添加到“externals”或“plugins”更好？ - Nathan

这对我有用。我正在使用rollup，我必须将以下内容添加到我的插件中： babel({ exclude: 'node_modules/**', presets: [ "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}], ] }) - Herii

什么配置？我应该在哪里添加它？ - mm_

好的，这是针对 .babelrc 文件的一个好点子！ - Jkarttunen

喜欢更详细解释的人可以看这里(由Chat-GPT提供)：@babel/preset-react是一个Babel预设，将React JSX语法转换为普通JS。添加 {"runtime": "automatic"} 启用了一种新的JSX转换[在React 17中引入]，它使用React运行时生成JSX表达式所需的必要代码。这样就不需要将React放在作用域中，从而可以更好地优化，[例如生成更少的代码和减小总包大小]。默认的classic transform需要将 React 对象置于作用域中。 - TheKearnol

另外请注意：如果您在使用Webpack(4)打包代码后遇到此问题，您可能需要在Webpack配置文件中loader: "babel-loader"下列出的@babel/preset-react预设中添加此选项。 - TheKearnol

Answer 2

我遇到了这个错误是因为我使用了

import ReactDOM from 'react-dom'

没有引入 React，我将代码更改为以下内容：

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

错误已经解决 :)

- Akshat Gupta

---

（加1）- 完全有意义 - Paul Samsotha

可以运行！这是从Python这样的语言中出现一些意想不到的。如果我只在主文件中使用 ReactDOM，我认为我可以（并且应该）摆脱对 React 的引用。哦，好吧，学到了点什么。 - jdm

使用我的React18，我有这些导入：import React from 'react' import ReactDOM from 'react-dom/client'，但是它没有帮助。 - Jack Pts

Answer 3

当我在使用webpack构建我的JavaScript时，在我的webpack.config.json中包含以下代码块，我能够重现这个错误：

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

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

- Barnasaurus Rex

---

我在我的配置中没有那个。 - mgPePe

这怎么成为被接受的答案了？它并没有回答问题。它也没有回答任何问题，只是重申了问题。 - Midiman

Answer 4

如果您正在使用Webpack，可以让它在需要时加载React，而无需在代码中显式地调用require。

请添加到webpack.config.js文件中：

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

请参考http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

- Jephir

---

我原以为可以使用 React: "react" 与其他的 ProvidePlugins 保持一致，但是不行 - 必须加上引号 "React"。 - ecoe

那对我有用，但我必须交换大小写"react":''React"。 - Alvin

非常酷，非常感谢！ - undefined

Answer 5

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

附注：

可能的解决方案。

1.如果在webpack配置的外部部分中提到了react，则必须直接将React JS文件加载到bundle.js之前的html中。

2.确保您有以下行：import React from 'react';

- J Santosh

Answer 6

尝试添加:

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

在render()函数之前。

有时这会防止错误弹出并返回：

React未定义

将React添加到window中将解决这些问题。

- Santosh Suryawanshi

---

最后一行是我缺失的部分。 - Tasos K.

谢谢兄弟！我试了将近两个小时才找到解决方案！太棒了。最后一行修复了它。 - Dheeraj Sam

在我的情况下，将 import React from 'react' 添加到主要的 js 文件就足够了。 - Lerk

Answer 7

添加给Santosh：

您可以通过以下方式加载React：

import React from 'react'

- Imamudin Naseem

---

@zero_cool 我喜欢分号，因为它使代码更易于阅读，但在JavaScript中它们是可选的。当省略时，它们将被自动插入。官方的EcmaScript规范有这个信息：“此外，尽管不被视为标记，行终止符也成为输入元素流的一部分，并指导自动分号插入的过程（11.9）。”来自：https://tc39.github.io/ecma262/#sec-lexical-and-regexp-grammars，它指向了这里：https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion 因此从技术上讲，你的两个代码示例都是正确且有效的JS。 - Clomp

Answer 8

我知道这个问题已经有答案了。但是因为对我有效的解决方法不完全在答案中，所以我将在这里添加它，希望它对其他人有用。

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

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 或其他任何地方进行更改以使其工作。

- pratyush

---

如果您使用的是 React 17 之前的任何版本，则需要将 React 导入文件中。在 17 及以后的版本中，使用 JSX 的文件不再需要导入 React。 - tkd_aj

Answer 9

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

这可能也会起作用！

- Abraham Jagadeesh

---

这给了我一个类型错误：Module'"react"'没有导出成员'PropTypes'。ts(2305)。 - p6l-richard

Answer 10

如果您使用 TypeScript，请确保您的 tsconfig.json 文件中的 "compilerOptions" 内包含 "jsx": "react"。

- pseudosudo

---

我有类似的经历："jsx": "react-jsx"，尝试了您所提供的版本只使用'react'，但无论哪种情况都没有帮助。 - Jack Pts