web-dev-qa-db-fra.com

Uncaught ReferenceError: React n'est pas défini

J'essaie de faire fonctionner ReactJS avec Rails en utilisant this tutorial. Je reçois cette erreur:

Uncaught ReferenceError: React is not defined

Mais je peux accéder à l’objet React dans la console du navigateur enter image description here
J'ai aussi ajouté public/dist/turbo-react.min.js comme décrit ici et ajouté //= require components ligne dans application.js comme décrit dans cette réponse à aucune chance. Aditionellement,
var React = require('react') donne l'erreur:
Uncaught ReferenceError: require is not defined

Quelqu'un peut-il me suggérer une solution à ce problème?

[EDIT 1]
Code source pour référence:
Ceci est mon fichier 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);

Et voici mon index.html.erb:

<div id="comments"></div>
javascriptruby-on-railsreactjs
58
sky_coder123

J'ai été en mesure de reproduire cette erreur lorsque j'utilisais Webpack pour créer mon code javascript avec le bloc suivant dans mon webpack.config.json:

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

La configuration ci-dessus indique à Webpack de ne pas résoudre require('react') en chargeant un module npm, mais plutôt d'attendre une variable globale (c'est-à-dire sur l'objet window) appelée React. La solution consiste à supprimer cette partie de la configuration (afin que React soit associé à votre javascript) ou à charger le framework React avant que ce fichier ne soit exécuté (pour que window.React existe).

66
Barnasaurus Rex

J'ai eu cette erreur parce que j'utilisais

import ReactDOM from 'react-dom'

sans importer réagit, une fois que je l'ai changé en dessous:

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

L'erreur a été résolue :)

31
Akshat Gupta

Si vous utilisez Webpack, vous pouvez le charger React si nécessaire sans avoir à explicitement require le dans votre code.

Ajouter à webpack.config.js :

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

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

30
Jephir

Les raisons possibles sont 1. vous n'avez pas chargé React.JS dans votre page, 2. vous l'avez chargé après le script ci-dessus dans votre page. La solution consiste à charger le fichier JS avant le script présenté ci-dessus.

P.S

Solutions possibles.

  1. Si vous mentionnez react dans la section externalals de la configuration du webpack, vous devez alors charger les fichiers js réagis directement dans votre code html avant le bundle.js
  2. Assurez-vous que vous avez la ligne import React from 'react';
30
J Santosh

Ajout à Santosh:

Vous pouvez charger React en

import React from 'react'
9
Imamudin Naseem
import React, { Component, PropTypes } from 'react';

Cela peut aussi fonctionner!

3
Abraham Jagadeesh

ajouter

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

avant la fonction de rendu

ceci est dû au fait qu'une erreur apparaîtra quelque temps en disant que React n'est pas défini

ajouter réagir à la fenêtre traitera ces problèmes

2
Santosh Suryawanshi

J'ai eu cette erreur parce que dans mon code, j'ai mal orthographié une définition de composant avec des minuscules _react.createClass_ au lieu de des majuscules _React.createClass_.

1
nomad