I am using the react-rails gem, followed all of the instructions in setup, and I cannot get React to load on the webpage. Screenshot from the React web dev tools:
Using ruby 2.7.2, Rails 6.1.4.
--
I tried it from a clean install and it worked perfectly. I just can't get it to load in an existing app, and I have tried copying config files in new-app to match existing app, and nothing breaks new-app or gets existing app to work.
If anyone could provide some help, or even just directions to look, I really feel lost here, and I would appreciate it.
Thank you!
Application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
HelloWorld.js
import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
render () {
return (
<React.Fragment>
Greeting: {this.props.greeting}
</React.Fragment>
);
}
}
HelloWorld.propTypes = {
greeting: PropTypes.string
};
export default HelloWorld
index.html.erb
<%= react_component("HelloWorld") %>
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.7.2'
gem 'rails'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 4.1'
gem 'sass-rails', '>= 6'
gem 'webpacker', '4.0'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.2', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise'
gem 'jquery-rails'
gem "aws-sdk-s3", require: false
gem "recaptcha"
gem 'filterrific'
gem 'will_paginate'
gem 'will_paginate-bootstrap4'
gem 'chosen-rails'
gem 'flatpickr_rails'
gem 'httparty'
gem "best_in_place", git: "https://github.com/mmotherwell/best_in_place"
gem 'down'
gem 'ruby-mp3info'
gem 'rack-cors'
gem 'rspotify'
gem 'rss'
gem 'redis'
gem 'sidekiq'
gem 'sidekiq-batch'
gem "sidekiq-throttled"
gem 'multipart-post'
gem 'rails_autoscale_agent'
gem "rack-timeout"
gem 'sidekiq-failures'
gem 'spicy-proton'
gem 'newrelic_rpm'
gem 'react-rails'
group :production do
gem 'sentry-raven'
end
group :development, :test do
gem 'dotenv-rails'
gem 'squasher'
gem 'faker'
gem 'rspec-rails'
gem 'capybara'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
gem 'webdrivers'
gem 'rails-controller-testing'
gem 'brakeman'
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
gem 'simplecov'
gem 'rspec-sidekiq'
gem 'factory_bot_rails'
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Blah</title>
<link rel="icon" type="image/png" href="blah" />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="robots" content="noindex,nofollow">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<%= javascript_pack_tag 'application' %>
</head>
