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

justin808 · claude · ihabadham · web-flow · commit 4b76b884fb6d · 2025-09-23T15:01:34.000-10:00
* Upgrade React on Rails from 14.2.1 to 16.0.1.rc.2 - Update react_on_rails gem: 14.2.1 → 16.0.1.rc.2 - Update react-on-rails npm: 14.2.1 → 16.0.1-rc.2 - Update rescript-react-on-rails: 1.0.1 → 1.1.0 (for React on Rails 16 support) - Add test environment configuration to resolve server bundle path issue - Add .prettierignore rule for ReScript generated files - All 38 tests passing ✅ 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Add enhanced development server tools from React on Rails 16 Brought over development improvements from justin-808-test-update-ror-v15: - Enhanced bin/dev script using ReactOnRails::Dev tools - Added bin/dev-static for static asset development mode - Added Procfile.dev-static-assets for webpack watching without HMR - Added Procfile.dev-prod-assets for production asset development - Updated Procfile.dev to use bin/rails instead of bundle exec These improvements provide better development workflows: - bin/dev: Default HMR development (existing) - bin/dev static: Static assets with webpack watching - Multiple Procfile options for different development modes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix trailing newline and RuboCop style in bin/dev-static - Add missing trailing newline - Fix string quote style to use double quotes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix staging deploy by upgrading Shakapacker to 8.2.0 React on Rails 16.0.1.rc.2 requires Shakapacker >= 8.2.0 for proper packer_type detection. Without this, the clean task invocation fails with 'Don't know how to build task :clean' during assets:precompile. This upgrade ensures the correct 'shakapacker:clean' task is invoked instead of the non-existent ':clean' task. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix Docker build failure by upgrading Shakapacker to 8.2.0 React on Rails 16 requires Shakapacker 8.2.0+ for proper packer type detection. With Shakapacker 8.0.0, ReactOnRails::PackerUtils.packer_type returned nil, causing React on Rails to invoke `:clean` instead of `shakapacker:clean` during assets:precompile, which resulted in a "Don't know how to build task ':clean'" error. Changes: - Upgrade shakapacker gem from 8.0.0 to 8.2.0 in Gemfile - Upgrade shakapacker npm package from 8.0.0 to 8.2.0 in package.json This resolves the Docker build failure and ensures React on Rails 16 can properly invoke the shakapacker:clean task during asset compilation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Update React on Rails to 16.0.1.rc.4 - Update react_on_rails gem from 16.0.1.rc.2 to 16.0.1.rc.4 - Update react-on-rails npm package to match version - Run bundle install and yarn install to update lock files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: ihabadham <ihabadham4p@gmail.com>
diff --git a/.prettierignore b/.prettierignore
@@ -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
diff --git a/Gemfile b/Gemfile
@@ -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"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -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)
@@ -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)
@@ -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)
@@ -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)
diff --git a/Procfile.dev b/Procfile.dev
@@ -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
diff --git a/Procfile.dev-prod-assets b/Procfile.dev-prod-assets
@@ -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'
diff --git a/Procfile.dev-static-assets b/Procfile.dev-static-assets
@@ -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'
diff --git a/bin/dev b/bin/dev
@@ -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
 
-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)
diff --git a/bin/dev-static b/bin/dev-static
@@ -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"])
diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb
@@ -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
diff --git a/package.json b/package.json
@@ -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",
@@ -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",
diff --git a/yarn.lock b/yarn.lock
