Skip to content

Upgrade React on Rails to 16.0.1.rc.4 with enhanced dev tools #655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 24, 2025
Merged

Upgrade React on Rails to 16.0.1.rc.4 with enhanced dev tools #655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55c2194
Upgrade React on Rails from 14.2.1 to 16.0.1.rc.2
justin808 Sep 21, 2025
d088c2e
Add enhanced development server tools from React on Rails 16
justin808 Sep 21, 2025
ea788b7
Fix trailing newline and RuboCop style in bin/dev-static
justin808 Sep 21, 2025
c3bbc27
Fix staging deploy by upgrading Shakapacker to 8.2.0
ihabadham Sep 21, 2025
8427012
Fix Docker build failure by upgrading Shakapacker to 8.2.0
justin808 Sep 21, 2025
d56639e
Update React on Rails to 16.0.1.rc.4
justin808 Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,6 @@ spec/support/
client/app/libs/i18n/translations.js
client/app/libs/i18n/default.js
vendor/bundle

# ReScript generated files should not be formatted
**/*.bs.js
4 changes: 2 additions & 2 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.3.4"

gem "react_on_rails", "14.2.1"
gem "shakapacker", "8.0.0"
gem "react_on_rails", "16.0.1.rc.4"
gem "shakapacker", "8.2.0"

# Bundle edge Rails instead: gem "rails", github: "rails/rails"
gem "listen"
Expand Down
9 changes: 5 additions & 4 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,12 +298,13 @@ GEM
rdoc (6.14.2)
erb
psych (>= 4.0.0)
react_on_rails (14.2.1)
react_on_rails (16.0.1.rc.4)
addressable
connection_pool
execjs (~> 2.5)
rails (>= 5.2)
rainbow (~> 3.0)
shakapacker (>= 6.0)
redcarpet (3.6.0)
redis (5.3.0)
redis-client (>= 0.22.0)
Expand Down Expand Up @@ -388,7 +389,7 @@ GEM
websocket (~> 1.0)
semantic_range (3.1.0)
sexp_processor (4.17.1)
shakapacker (8.0.0)
shakapacker (8.2.0)
activesupport (>= 5.2)
package_json
rack-proxy (>= 0.6.1)
Expand Down Expand Up @@ -484,7 +485,7 @@ DEPENDENCIES
rails-html-sanitizer
rails_best_practices
rainbow
react_on_rails (= 14.2.1)
react_on_rails (= 16.0.1.rc.4)
redcarpet
redis (~> 5.0)
rspec-rails (~> 6.0.0)
Expand All @@ -496,7 +497,7 @@ DEPENDENCIES
scss_lint
sdoc
selenium-webdriver (~> 4)
shakapacker (= 8.0.0)
shakapacker (= 8.2.0)
spring
spring-commands-rspec
stimulus-rails (~> 1.3)
Expand Down
2 changes: 1 addition & 1 deletion Procfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
# You can run these commands in separate shells
rescript: yarn res:dev
redis: redis-server
rails: bundle exec rails s -p 3000
rails: bin/rails s -p 3000
wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
10 changes: 10 additions & 0 deletions Procfile.dev-prod-assets
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# You can run these commands in separate shells
web: bin/rails s -p 3001
redis: redis-server

# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
Comment on lines +1 to +10
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

"Prod assets" file currently builds dev watch; align with production mode.

This Procfile claims production assets but uses a watch and no production env. Switch to a one-time production build and run Rails with production env (and static files).

-web: bin/rails s -p 3001
+web: RAILS_ENV=production RAILS_SERVE_STATIC_FILES=true bin/rails s -p 3001
@@
-webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+webpack: sh -c 'RAILS_ENV=production NODE_ENV=production bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && RAILS_ENV=production NODE_ENV=production bin/shakapacker'

Optionally export SECRET_KEY_BASE/RAILS_MASTER_KEY via your process manager if required.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# You can run these commands in separate shells
web: bin/rails s -p 3001
redis: redis-server
# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
# You can run these commands in separate shells
web: RAILS_ENV=production RAILS_SERVE_STATIC_FILES=true bin/rails s -p 3001
redis: redis-server
# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
webpack: sh -c 'RAILS_ENV=production NODE_ENV=production bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && RAILS_ENV=production NODE_ENV=production bin/shakapacker'
🤖 Prompt for AI Agents 
In Procfile.dev-prod-assets around lines 1 to 10, the "webpack" entry runs a
development watch and doesn't build production assets nor start Rails in
production; change it to perform a one-time production asset build and start
Rails with RAILS_ENV=production and static files enabled. Replace the watch
command with a production precompile (e.g. run bundle exec rake
react_on_rails:locale && RAILS_ENV=production bin/shakapacker && bin/rails
assets:precompile or equivalent single-run build), ensure the web entry runs
bin/rails s -e production -p 3001 and serves static files
(RAILS_SERVE_STATIC_FILES=1), and note that SECRET_KEY_BASE/RAILS_MASTER_KEY
should be provided by your process manager if required.

10 changes: 10 additions & 0 deletions Procfile.dev-static-assets
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# You can run these commands in separate shells
web: bin/rails s -p 3000
redis: redis-server

# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
49 changes: 25 additions & 24 deletions bin/dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
#!/usr/bin/env ruby
# frozen_string_literal: true

def installed?(process)
IO.popen "#{process} -v"
rescue Errno::ENOENT
false
end
# ReactOnRails Development Server
#
# This script provides a simple interface to the ReactOnRails development
# server management. The core logic is implemented in ReactOnRails::Dev
# classes for better maintainability and testing.
#
# Each command uses a specific Procfile for process management:
# - bin/dev (default/hmr): Uses Procfile.dev
# - bin/dev static: Uses Procfile.dev-static-assets-assets
# - bin/dev prod: Uses Procfile.dev-prod-assets
#
# To customize development environment:
# 1. Edit the appropriate Procfile to modify which processes run
# 2. Modify this script for project-specific command-line behavior
# 3. Extend ReactOnRails::Dev classes in your Rails app for advanced customization
# 4. Use classes directly: ReactOnRails::Dev::ServerManager.start(:development, "Custom.procfile")

def run(process)
system "#{process} start -f Procfile.dev"
rescue Errno::ENOENT
warn <<~MSG
ERROR:
Please ensure `Procfile.dev` exists in your project!
MSG
exit!
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../../lib/react_on_rails/dev"
end
Comment on lines +21 to 28
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Incorrect require_relative path; fallback won’t find local dev code.

From bin/dev, "../../lib/…" is one directory too high. Also prefer stderr for the notice and a single rescue covering only the gem require.

Apply:

-begin
-  require "bundler/setup"
-  require "react_on_rails/dev"
-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
-end
+begin
+  require "bundler/setup"
+  require "react_on_rails/dev"
+rescue LoadError
+  # Fallback when gem not installed
+  warn "Loading ReactOnRails development tools from local lib..."
+  require_relative File.expand_path("../lib/react_on_rails/dev", __dir__)
+end

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In bin/dev around lines 21-28, the fallback require_relative points one
directory too high and the rescue currently covers the bundler setup as well;
change the rescue to only wrap the gem require "react_on_rails/dev", update the
fallback require_relative path to "../lib/react_on_rails/dev" so it finds the
local lib, and write the notice to stderr (use warn or STDERR.puts) instead of
puts.


if installed? "overmind"
run "overmind"
elsif installed? "foreman"
run "foreman"
else
warn <<~MSG
NOTICE:
For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
MSG
exit!
end
# Main execution
ReactOnRails::Dev::ServerManager.run_from_command_line(ARGV)
37 changes: 13 additions & 24 deletions bin/dev-static
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,19 @@
#!/usr/bin/env ruby
# frozen_string_literal: true

def installed?(process)
IO.popen "#{process} -v"
rescue Errno::ENOENT
false
end
# ReactOnRails Development Server - Static Assets Mode
#
# This runs development with static assets instead of HMR.
# Useful when you want faster startup or HMR is causing issues.

def run(process)
system "#{process} start -f Procfile.dev-static"
rescue Errno::ENOENT
warn <<~MSG
ERROR:
Please ensure `Procfile.dev-static` exists in your project!
MSG
exit!
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../../lib/react_on_rails/dev"
end

if installed? "overmind"
run "overmind"
elsif installed? "foreman"
run "foreman"
else
warn <<~MSG
NOTICE:
For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
MSG
exit!
end
# Force static mode by passing 'static' argument
ReactOnRails::Dev::ServerManager.run_from_command_line(["static"])
Comment on lines +9 to +19
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Fallback require path is wrong; breaks when gem isn’t installed.

bin/dev-static lives in project/bin, so require_relative should go up one, not two.

-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
+rescue LoadError
+  # Fallback for when gem is not yet installed
+  puts "Loading ReactOnRails development tools..."
+  require_relative "../lib/react_on_rails/dev"

Also ensure this file has +x perms and is referenced in docs.

🏁 Script executed:

#!/bin/bash
set -euo pipefail
test -x bin/dev-static && echo "bin/dev-static is executable" || { echo "chmod +x bin/dev-static"; exit 1; }

Length of output: 28

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "PWD: $(pwd -P)"
echo
echo "Root listing:"
ls -la | sed -n '1,200p' || true
echo
echo "---- bin/dev-static (first 200 lines) ----"
if [ -f bin/dev-static ]; then
  sed -n '1,200p' bin/dev-static
else
  echo "bin/dev-static not found"
  exit 0
fi
echo
echo "---- require_relative lines in repo ----"
if command -v rg >/dev/null 2>&1; then
  rg -n "require_relative" --hidden --no-ignore || true
else
  grep -RIn --exclude-dir=.git "require_relative" . || true
fi
echo
echo "---- File existence checks ----"
if [ -f lib/react_on_rails/dev.rb ]; then
  echo "FOUND: lib/react_on_rails/dev.rb"
else
  echo "MISSING: lib/react_on_rails/dev.rb"
fi
if [ -f bin/../lib/react_on_rails/dev.rb ]; then
  echo "FOUND: bin/../lib/react_on_rails/dev.rb"
else
  echo "MISSING: bin/../lib/react_on_rails/dev.rb"
fi
if [ -f bin/../../lib/react_on_rails/dev.rb ]; then
  echo "FOUND: bin/../../lib/react_on_rails/dev.rb"
else
  echo "MISSING: bin/../../lib/react_on_rails/dev.rb"
fi
echo
echo "---- Search repo for references to 'dev-static' ----"
if command -v rg >/dev/null 2>&1; then
  rg -n --hidden --no-ignore 'dev-static' || true
else
  grep -RIn --exclude-dir=.git 'dev-static' . || true
fi

Length of output: 4710

Fix fallback require_relative path and restore missing fallback file

  • In bin/dev-static (lines 9–19) update the fallback require_relative to one level up. Apply this exact change:
-rescue LoadError
-  # Fallback for when gem is not yet installed
-  puts "Loading ReactOnRails development tools..."
-  require_relative "../../lib/react_on_rails/dev"
+rescue LoadError
+  # Fallback for when gem is not yet installed
+  puts "Loading ReactOnRails development tools..."
+  require_relative "../lib/react_on_rails/dev"
  • Also apply the same require_relative fix in bin/dev (around line 27).
  • lib/react_on_rails/dev.rb is missing from the repo — add/restore that file or update the fallback to the correct path/gem so the rescue path works.
  • bin/dev-static is already executable (no chmod needed).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../../lib/react_on_rails/dev"
end
if installed? "overmind"
run "overmind"
elsif installed? "foreman"
run "foreman"
else
warn <<~MSG
NOTICE:
For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
MSG
exit!
end
# Force static mode by passing 'static' argument
ReactOnRails::Dev::ServerManager.run_from_command_line(["static"])
begin
require "bundler/setup"
require "react_on_rails/dev"
rescue LoadError
# Fallback for when gem is not yet installed
puts "Loading ReactOnRails development tools..."
require_relative "../lib/react_on_rails/dev"
end
# Force static mode by passing 'static' argument
ReactOnRails::Dev::ServerManager.run_from_command_line(["static"])
🤖 Prompt for AI Agents 
In bin/dev-static around lines 9 to 19, the fallback require_relative path is
one directory too deep and should be changed to require_relative
"../lib/react_on_rails/dev" (apply the identical require_relative fix in bin/dev
around line 27); additionally, restore or add the missing file
lib/react_on_rails/dev.rb (or update the fallback to point to the correct gem
path) so the rescue path can actually load the development helper; make these
exact path fixes and add the missing lib file to the repo (no chmod changes
required).

10 changes: 10 additions & 0 deletions config/initializers/react_on_rails.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,16 @@
# not affect performance.
config.server_bundle_js_file = "server-bundle.js"

# React on Rails 16 compatibility: Workaround for removed error handling
#
# BREAKING CHANGE in v16: React on Rails 14.2.1 had robust error handling that would
# fallback to the Shakapacker output path when bundle lookup failed. This was removed
# in v16.0.1.rc.2, causing it to look in the wrong directory during tests.
#
# This configuration tells React on Rails where to find bundles in test environment.
# Without this, it defaults to public/webpack/test/ instead of public/packs/
config.generated_assets_dir = Rails.public_path.join("packs").to_s if Rails.env.test?

################################################################################
# CLIENT RENDERING OPTIONS
# Below options can be overriden by passing options to the react_on_rails
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-intl": "^6.4.4",
"react-on-rails": "14.2.1",
"react-on-rails": "16.0.1-rc.4",
"react-redux": "^8.1.0",
"react-router": "^6.13.0",
"react-router-dom": "^6.13.0",
Expand All @@ -87,13 +87,13 @@
"redux": "^4.2.1",
"redux-thunk": "^2.2.0",
"rescript": "^11.1.4",
"rescript-react-on-rails": "^1.0.1",
"rescript-react-on-rails": "1.1.0",
"resolve-url-loader": "^2.2.0",
"sanitize-html": "^2.11.0",
"sass": "^1.58.3",
"sass-loader": "^13.3.2",
"sass-resources-loader": "^2.2.5",
"shakapacker": "8.0.0",
"shakapacker": "8.2.0",
"stimulus": "^3.0.1",
"style-loader": "^3.3.1",
"tailwindcss": "^3.3.3",
Expand Down
Loading