13646

Uncaught ReferenceError: require is not defined react rails

Question:

I just fixed two errors like this.

Uncaught ReferenceError: $ is not defined Uncaught ReferenceError: React is not defined

Now I get this. I just keep getting these errors. I am just trying to implement react with rails for the first time and I am trying to say a simple "Hello React" from a react component through a html div class. I am not able to.

<strong>application.js</strong>

//= require rails-ujs //= require_tree . //= require jquery //= require jquery_ujs //= require react

<strong>index.html.erb</strong>

<div id="react"></div>

<strong>main.jsx</strong>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> import React from 'react'; import ReactDOM from 'react-dom'; let documentReady = () => { React.render(

Hello React

, document.getElementById('react') ); }; $(documentReady);

Answer1:

Move require_tree . at the end in application.js like:

//= require rails-ujs //= require jquery //= require jquery_ujs //= require react //= require_tree .

Recommend

  • How to add a lightbox style image gallery to a refinery-cms website?
  • jquery:install doesn't work in Rails
  • how to add semantic ui in a rails app?
  • PHP + XML - how to rename and delete XML elements using SimpleXML or DOMDocument?
  • TFS - how do I sum child task hours to parent
  • Detecting # in Scheme list
  • passing a default argument to a browserify module
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • rspec simple example getting error on request variable in integration test
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • How to attach a node.js readable stream to a Sendgrid email?
  • Typescript - Unable to get 'import' statement to function
  • Exception “firebase.functions() takes … no argument …” when specifying a region for a Cloud Function
  • FileReader+canvas image loading problem
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • req.body is undefined - nodejs
  • C# - Serializing and deserializing static member
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • Updating server-side rendering client-side
  • Modifying destination and filename of gulp-svg-sprite
  • Sending data from AppleScript to FileMaker records
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • How to include full .NET prerequisite for Wix Burn installer
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Is it possible to post an object from jquery to bottle.py?
  • unknown Exception android
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app