IT技术 - 未捕获的 ReferenceError：React 未定义 - 吾爱随笔录

未捕获的 ReferenceError：React 未定义

IT技术 javascript ruby-on-rails reactjs

2021-03-01 07:54:05

我正在尝试使用本教程使 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>

6个回答

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

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

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

删除此配置为我解决了问题。

2021-04-16 07:54:05

我的配置中没有那个

2021-05-01 07:54:05

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

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

正确答案 :thumbsup:

2021-04-23 07:54:05

<<<<<<<<<<<<<< 2021年唯一的真相>>>>>>>>>>>>>>

2021-04-29 07:54:05

感谢这位朋友，真正的救星。🙌🏼

2021-05-04 07:54:05

这个。谢谢🙏

2021-05-05 07:54:05

这是最准确的答案

2021-05-09 07:54:05

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

import ReactDOM from 'react-dom'

没有导入react，一旦我将其更改为以下内容：

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

错误已解决:)

作品！来自像 Python 这样的语言有点出乎意料。如果我只ReactDOM在我的主文件中使用，我想我可以（并且应该）摆脱对React. 呵呵，学到东西了。

2021-04-22 07:54:05

（加 1） - 非常有道理

2021-05-06 07:54:05

如果你使用 Webpack，你可以让它在需要时加载 React，而不必require在你的代码中显式地加载它。

添加到webpack.config.js：

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

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

我以为我可以做到React: "react"与 other 保持一致ProvidePlugins，但没有 - 必须被"React"引用。

2021-05-06 07:54:05

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

聚苯乙烯

可能的解决方案。

如果你react在 webpack 配置中的 externals 部分提到，那么你必须在之前将 react js 文件直接加载到你的 html 中bundle.js
确保你有线路 import React from 'react';

其它你可能感兴趣的问题

上一篇比较 ECMA6 集的相等性下一篇为什么 TypeScript 中的 'instanceof' 给我错误“'Foo' 仅指一种类型，但在此处用作值。”？