未捕获的参考错误: 没有定义 React

我正在尝试使用 这个教程使 ReactJS 与 Rails 一起工作。我得到了这个错误:

Uncaught ReferenceError: React is not defined

但我可以在浏览器控制台访问 React 对象enter image description here
我还按照描述的 给你添加了 Public/dist/turbo-response. 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>
297786 次浏览
小开

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

附言

可能的解决办法。

  1. 如果在 webpack 配置的外部部分中提到了 react，那么必须在 bundle.js之前将 response js 文件直接加载到 html 中
  2. 确保你有线 import React from 'react';
小开
最佳答案

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

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

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

小开

桑托什补充道:

你可以加载 React by

import React from 'react'
小开

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

加入 Webpack.config.js:

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

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

小开

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

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

这也可能有用！

小开

我得到这个错误，因为我正在使用

import ReactDOM from 'react-dom'

不需要进口反应，一旦我把它改为如下:

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

错误解决了:)

小开

显示的错误

在进口反应之后

最后输入反应

如果错误是反应未定义，请添加 = = > import React from 'react';

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

小开

试着加上:

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

在 render()函数之前。

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

反应没有定义

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

小开

我也面临着同样的问题。 我通过导入 React和 ReactDOM解决了这个问题，如下所示:

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

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

小开

如果您正在使用 Babel 和 React 17，则可能需要向配置中添加“运行时”: “自动”。

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

有时导入的顺序可能会导致这个错误，如果在您执行了上述所有步骤之后仍然发现这对您来说很困难，请尝试确保先导入 react。

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

在你做任何其他重要决定之前。

小开

对于使用 CRA 而最终得到这个问题的人，可以使用 customize-cra和 react-app-rewired软件包来覆盖 CRA 中的巴贝尔预设。 为此，在根目录中创建一个 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",
小开

我知道这个问题已经有答案了。但是因为对我有用的东西并不完全在答案中，所以我在这里加上它，希望它对其他人也有用。

当我得到 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 或其他任何地方做任何更改来使这个工作。

小开

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

import React from 'react';

同时与反应，打字机和包裹工作

改成:

import * as React from 'react';

按照 https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-381817548的建议解决了问题

小开

我得到这个是因为我写了

import react from 'react'

而不是

import React from 'react'


提交答案