बिना संदर्भ के संदर्भ: प्रतिक्रिया परिभाषित नहीं है

Question

मैं इस ट्यूटोरियल का उपयोग करके रेल के साथ रिएक्टजेएस काम करने की कोशिश कर रहा हूं । मुझे यह त्रुटि मिल रही है:

---

Uncaught ReferenceError: React is not defined

लेकिन मैं ब्राउज़र कंसोल में रिएक्ट ऑब्जेक्ट को एक्सेस कर सकता हूं मैंने सार्वजनिक / डिस्टर्ब / टर्बो-रिएक्ट्स .min.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>

Answer 1

मैं इस त्रुटि को पुन: पेश करने में सक्षम था जब मैं अपने जावास्क्रिप्ट का निर्माण करने के लिए निम्नलिखित में से एक के साथ अपने जावास्क्रिप्ट का उपयोग कर रहा था webpack.config.json:

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

यह उपरोक्त कॉन्फ़िगरेशन वेबपैक को require('react')npm मॉड्यूल को लोड करने से हल नहीं करने के लिए कहता है , लेकिन इसके बजाय एक वैश्विक चर (यानी windowऑब्जेक्ट पर) की उम्मीद करने के लिए कहा जाता है React। समाधान या तो कॉन्फ़िगरेशन के इस टुकड़े को निकालने के लिए है (इसलिए रिएक्ट को आपके जावास्क्रिप्ट के साथ बंडल किया जाएगा) या इस फ़ाइल को निष्पादित करने से पहले बाहरी रूप से रिएक्ट फ्रेमवर्क को लोड करें (ताकि window.Reactमौजूद हो)।

Comments

इस कॉन्फ़िगरेशन को हटाने से मेरे लिए समस्या हल हो गई।

— डीजे 2

इस विन्यास को हटाने से मेरे लिए भी समस्या हल हो गई

— p

धन्यवाद, इससे मुझे भी मदद मिली।

— rnd

Answer 2

मुझे यह त्रुटि मिली क्योंकि मैं उपयोग कर रहा था

import ReactDOM from 'react-dom'

आयात प्रतिक्रिया के बिना, एक बार मैंने इसे नीचे में बदल दिया:

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

त्रुटि हल हो गई थी :)

Comments

(प्लस १) - सही अर्थ बनाता है

— पॉल समसोथा

काम करता है! यह पाइथन जैसी भाषा से थोड़ा अप्रत्याशित है। यदि मैं केवल ReactDOMअपनी मुख्य फ़ाइल में उपयोग कर रहा हूं , तो मुझे लगा कि मैं (और) को संदर्भ से छुटकारा मिल सकता है React। अरे अच्छा, कुछ सीखा।

— jdm

Answer 3

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आपके पास requireअपने कोड में स्पष्ट रूप से बिना आवश्यकता के रिएक्ट लोड हो सकता है ।

Webpack.config.js में जोड़ें :

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

Http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin देखें

Answer 4

संभावित कारण हैं 1. आपने अपने पेज में React.JS लोड नहीं किया, 2. आपने इसे उपरोक्त स्क्रिप्ट के बाद अपने पेज में लोड किया। समाधान ऊपर दिखाए गए स्क्रिप्ट से पहले JS फाइल को लोड करता है।

पी.एस.

संभव समाधान।

1. यदि आप reactवेबपैक कॉन्फ़िगरेशन के अंदर एक्सटर्नल सेक्शन में उल्लेख करते हैं , तो आपको पहले सीधे अपने HTML में रिएक्शन जेएस फाइलों को लोड करना होगाbundle.js
2. सुनिश्चित करें कि आपके पास लाइन है import React from 'react';

Answer 5

जोड़ने की कोशिश करें:

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

से पहले render()समारोह ।

यह कभी-कभी त्रुटि को पॉप-अप रिटर्न में रोकता है:

प्रतिक्रिया परिभाषित नहीं है

Reactविंडो में जोड़ने से इन समस्याओं का समाधान होगा।

Comments

अंतिम पंक्ति मेरे लिए गायब हिस्सा था।

— टासोस के।

Answer 6

संतोष में जोड़ना:

आप द्वारा प्रतिक्रिया लोड कर सकते हैं

import React from 'react'

Comments

@zero_cool मुझे सेमी-कॉलोन बहुत पसंद है क्योंकि यह कोड को पढ़ना आसान बनाता है, लेकिन वे जावास्क्रिप्ट में वैकल्पिक हैं। जब छोड़ा जाता है, तो वे स्वचालित रूप से सम्मिलित हो जाएंगे। आधिकारिक EcmaScript युक्ति में यह जानकारी है: "इसके अलावा, लाइन टर्मिनेटर, हालांकि टोकन नहीं माने जाते हैं, इनपुट तत्वों की धारा का भी हिस्सा बन जाते हैं और स्वचालित अर्धविराम सम्मिलन (11.9) की प्रक्रिया को निर्देशित करते हैं।" से: tc39.github.io/ecma262/#sec-lexical-and-regexp-grammars जो इसे इंगित करता है: tc39.github.io/ecma262/#sec-automatic-semicolon-insertion तो तकनीकी रूप से, आपके दोनों कोड उदाहरण हैं। सही और वैध जेएस।

— क्लॉम्प

Answer 7

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

यह भी काम कर सकता है!

Answer 8

मुझे यह त्रुटि मिली क्योंकि मेरे कोड में मैंने react.createClassअपरकेस के बजाय लोअरकेस के साथ एक घटक परिभाषा को गलत किया React.createClass।

Answer 9

मैं उसी मुद्दे का सामना कर रहा था। मैंने इसे आयात करके हल किया Reactऔर ReactDOMइस प्रकार है:

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

Answer 10

यदि आप Babel और React 17 का उपयोग कर रहे हैं, तो आपको कॉन्फ़िगर करने के लिए "रनटाइम 2:" स्वचालित "जोड़ना होगा।

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

Answer 11

प्रदर्शित त्रुटि

उसके बाद आयात प्रतिक्रिया

अंत में आयात प्रतिक्रिया-डोम

यदि त्रुटि प्रतिक्रिया परिभाषित नहीं है, तो कृपया जोड़ें ==>import React from 'react';

यदि त्रुटि प्रतिक्रिया है तो परिभाषित नहीं है, कृपया ==> जोड़ेंimport ReactDOM from 'react-dom';

Answer 12

आप टाइपप्रति उपयोग कर रहे हैं, सुनिश्चित करें कि आपके सुनिश्चित tsconfig.jsonहै "jsx": "react"भीतर "compilerOptions"।