Uncaught ReferenceError: ไม่ได้กำหนดปฏิกิริยา

ฉันพยายามที่จะทำให้การทำงานของ ReactJS กับรางใช้นี้กวดวิชา ฉันได้รับข้อผิดพลาดนี้:

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>

ฉันสามารถสร้างข้อผิดพลาดนี้ซ้ำได้เมื่อฉันใช้ webpack เพื่อสร้างจาวาสคริปต์ของฉันโดยมีส่วนต่อไปนี้ในwebpack.config.json:

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

นี้ค่าข้างต้นบอก webpack จะไม่สามารถแก้ไขrequire('react')ได้โดยการโหลดโมดูล NPM แต่จะคาดหวังว่าตัวแปรทั่วโลก (เช่นบนwindowวัตถุ) Reactที่เรียกว่า วิธีแก้ปัญหาคือลบส่วนกำหนดค่านี้ออก (ดังนั้น React จะรวมกับจาวาสคริปต์ของคุณ) หรือโหลดเฟรมเวิร์ก React จากภายนอกก่อนที่ไฟล์นี้จะถูกเรียกใช้งาน (เพื่อให้window.Reactมีอยู่)

ฉันได้รับข้อผิดพลาดนี้เนื่องจากฉันใช้ไฟล์

import ReactDOM from 'react-dom'

โดยไม่ต้องนำเข้าการตอบสนองเมื่อฉันเปลี่ยนเป็นด้านล่าง:

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

แก้ไขข้อผิดพลาดแล้ว :)

หากคุณใช้ Webpack คุณสามารถโหลด React ได้เมื่อจำเป็นโดยไม่ต้องระบุอย่างชัดเจนrequireในโค้ดของคุณ

เพิ่มในwebpack.config.js :

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

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

สาเหตุที่เป็นไปได้คือ 1. คุณไม่ได้โหลด React.JS ลงในเพจของคุณ 2. คุณโหลดหลังจากสคริปต์ด้านบนลงในเพจของคุณ วิธีแก้ไขคือโหลดไฟล์ JS ก่อนสคริปต์ที่แสดงด้านบน

ปล

การแก้ปัญหาที่เป็นไปได้.

1. หากคุณพูดถึงreactในส่วนภายนอกภายในการกำหนดค่า webpack คุณต้องโหลดไฟล์ react js ลงใน html ของคุณโดยตรงก่อนbundle.js
2. ตรวจสอบให้แน่ใจว่าคุณมีสาย import React from 'react';

ลองเพิ่ม:

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

ก่อนrender()ฟังก์ชัน

บางครั้งสิ่งนี้จะป้องกันข้อผิดพลาดในการส่งคืนป๊อปอัป:

ไม่ได้กำหนดปฏิกิริยา

การเพิ่มReactลงในหน้าต่างจะช่วยแก้ปัญหาเหล่านี้ได้

การเพิ่มไปยัง Santosh:

คุณสามารถโหลด React ได้โดย

import React from 'react'

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

สิ่งนี้อาจได้ผล!

ผมได้รับข้อผิดพลาดนี้เพราะในรหัสของฉันฉันสะกดคำนิยามองค์ประกอบด้วยตัวพิมพ์เล็กแทนตัวพิมพ์ใหญ่react.createClassReact.createClass

ฉันประสบปัญหาเดียวกัน ฉันแก้ไขโดยการนำเข้าReactและReactDOMชอบดังนี้:

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

หากคุณใช้ Babel และ React 17 คุณอาจต้องเพิ่ม "runtime2:" automatic "ใน config

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

ข้อผิดพลาดที่แสดง

หลังจากการนำเข้านั้นตอบสนอง

สุดท้ายนำเข้า react-dom

หากข้อผิดพลาดคือการตอบสนองไม่ได้กำหนดโปรดเพิ่ม ==>import React from 'react';

หากข้อผิดพลาดคือ reactDOM ไม่ได้กำหนดโปรดเพิ่ม ==>import ReactDOM from 'react-dom';

หากคุณกำลังใช้ typescript ให้แน่ใจว่าคุณtsconfig.jsonมีภายใน"jsx": "react""compilerOptions"