未捕获的ReferenceError：未定义React

Question

我正在尝试使用this教程使ReactJS与rails配合使用。我收到了这个错误：

Uncaught ReferenceError: React is not defined

但我可以在浏览器控制台中访问React对象 我还按照public/dist/turbo-react.min.js所述添加了here，并在application {j}中添加了//= require components行，如in this answer所述，没有运气。此外，
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在我的webpack.config.json中使用以下块构建我的javascript时，我能够重现此错误：

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

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

Answer 2

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

P.S

可能的解决方案。

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

Answer 3

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

invalidate

没有导入反应，一旦我将其改为以下：

deinit

错误已解决：）

Answer 4

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

添加到 webpack.config.js ：

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

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

Answer 5

添加到Santosh：

您可以通过

加载React

import React from 'react'

Answer 6

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

这也可能有用！

Answer 7

添加

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

渲染功能之前

这是因为有时会弹出错误消息，表明未定义React

在窗口中添加反应将解决这些问题

Answer 8

我收到此错误，因为在我的代码中，我拼错了一个小写react.createClass而不是大写React.createClass的组件定义。

Answer 9

我面临着同样的问题。 我通过导入Alert和React来解决它，如下所示：

ReactDOM

Answer 10

如果您正在使用Babel和React 17，则可能需要在配置中添加“ runtime2：”自动”。

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

Answer 11

如果您使用的是TypeScript，请确保tsconfig.json中的"jsx": "react"中有"compilerOptions"。

Answer 12

有时导入顺序会导致此错误，如果您在按照上述所有步骤操作后仍然觉得困难，请尝试确保先导入 react。

import React from 'react'
import { render } from 'react-dom'

在你需要做的任何其他重要事情之前。

Answer 13

对于使用 CRA 并最终解决此问题的人，可以使用 customize-cra 和 react-app-rewired 包来覆盖 CRA 中的 babel 预设。 为此，请在根目录中创建一个 config-overrides.js 并将此代码片段粘贴到其中。

const { override, addBabelPreset } = require('customize-cra');

module.exports = override(
    addBabelPreset('@emotion/babel-preset-css-prop'),
    addBabelPreset([
        '@babel/preset-react',
        {
            runtime: 'automatic',
            importSource: '@emotion/react',
        },
    ]),
);

并使用以下脚本更新 package.json 中的脚本。

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",

Answer 14

The displayed error

after that import react

Finally import react-dom

如果未定义错误，请添加==＆gt; import React from 'react';

如果错误是未定义reactDOM，请添加==＆gt; import ReactDOM from 'react-dom';