Nicht erfasster Referenzfehler: Reaktion ist nicht definiert

87

Mit diesem Tutorial versuche ich, ReactJS mit Schienen zum Laufen zu bringen . Ich erhalte diesen Fehler:


Uncaught ReferenceError: React is not defined

Aber ich kann auf das React-Objekt in der Browserkonsole zugreifen. Ich habe auch public / dist / turbo-react.min.js hinzugefügt, wie hier beschrieben , und auch Zeile in application.js hinzugefügt , wie in dieser Antwort beschrieben , ohne Erfolg. Zusätzlich gibt der Fehler:Geben Sie hier die Bildbeschreibung ein
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Kann mir jemand vorschlagen, wie ich das lösen kann?

[EDIT 1]
Quellcode als Referenz:
Dies ist meine comments.js.jsxDatei:

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);

Und das ist mein index.html.erb:

<div id="comments"></div>
sky_coder123
quelle

Antworten:

91

Ich konnte diesen Fehler reproduzieren, als ich Webpack verwendete, um mein Javascript mit dem folgenden Block in meinem zu erstellen webpack.config.json:

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

Diese obige Konfiguration weist das Webpack an, nicht require('react')durch Laden eines npm-Moduls aufzulösen , sondern eine windowaufgerufene globale Variable (dh für das Objekt) zu erwarten React. Die Lösung besteht darin, entweder diese Konfiguration zu entfernen (damit React mit Ihrem Javascript gebündelt wird) oder das React-Framework extern zu laden, bevor diese Datei ausgeführt wird (sofern window.Reactvorhanden).

Barnasaurus Rex
quelle
4
Das Entfernen dieser Konfiguration löste das Problem für mich.
DJ2
Das Entfernen dieser Konfiguration löste das Problem auch für mich
coinhndp
49

Ich habe diesen Fehler erhalten, weil ich verwendet habe

import ReactDOM from 'react-dom'

ohne zu importieren reagieren, sobald ich es unten geändert habe:

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

Der Fehler wurde behoben :)

Akshat Gupta
quelle
(plus 1) -
Sinnvoll
2
Funktioniert! Das ist etwas unerwartet aus einer Sprache wie Python. Wenn ich nur ReactDOMin meiner Hauptdatei verwende, dachte ich, ich kann (und sollte) den Verweis auf loswerden React. Na ja, etwas gelernt.
JDM
35

Mögliche Gründe sind: 1. Sie haben React.JS nicht auf Ihre Seite geladen, 2. Sie haben es nach dem obigen Skript auf Ihre Seite geladen. Die Lösung besteht darin, die JS-Datei vor dem oben gezeigten Skript zu laden.

PS

Mögliche Lösungen.

  1. Wenn Sie reactim Abschnitt "Extern" in der Webpack-Konfiguration erwähnen, müssen Sie die reaktions-js-Dateien vorher direkt in Ihr HTML ladenbundle.js
  2. Stellen Sie sicher, dass Sie die Leitung haben import React from 'react';
J Santosh
quelle
12

Versuchen Sie hinzuzufügen:

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

vor der render()Funktion.

Dies verhindert manchmal, dass ein Fehler in der Popup-Datei angezeigt wird:

Reaktion ist nicht definiert

Durch Hinzufügen Reactzum Fenster werden diese Probleme gelöst.

Santosh Suryawanshi
quelle
1
Die letzte Zeile war der fehlende Teil für mich.
Tasos K.
11

Hinzufügen zu Santosh:

Sie können React by laden

import React from 'react'
Imamudin Naseem
quelle
1
@zero_cool Ich liebe Semikolons, da sie das Lesen von Code erleichtern, aber in JavaScript sind sie optional. Wenn sie weggelassen werden, werden sie automatisch eingefügt. Die offizielle EcmaScript-Spezifikation enthält folgende Informationen: "Darüber hinaus werden Zeilenterminatoren, obwohl sie nicht als Token betrachtet werden, Teil des Stroms von Eingabeelementen und leiten den Prozess der automatischen Einfügung von Semikolons (11.9)." von: tc39.github.io/ecma262/#sec-lexical-and-regexp-grammars, was darauf hinweist: tc39.github.io/ecma262/#sec-automatic-semicolon-insertion Technisch gesehen sind also beide Codebeispiele korrekte & gültige JS.
Clomp
3
import React, { Component, PropTypes } from 'react';

Das kann auch funktionieren!

Abraham Jagadeesh
quelle
3

Ich habe diesen Fehler erhalten, weil ich in meinem Code eine Komponentendefinition mit Kleinbuchstaben react.createClassanstelle von Großbuchstaben falsch geschrieben habe React.createClass.

Nomade
quelle
1

Ich stand vor dem gleichen Problem. Ich habe es durch Importieren gelöst Reactund ReactDOMwie folgt:

import React from 'react';
import ReactDOM from 'react-dom';
anand shukla
quelle
0

Wenn Sie mit Typoskript, stellen Sie sicher , dass Sie tsconfig.jsonhat "jsx": "react"innerhalb "compilerOptions".

Pseudosudo
quelle