From a289bba22d31b985776a52a65f58efc381fecb32 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 19:27:28 -1000
Subject: [PATCH 01/15] Upgrade Shakapacker from 9.0.0 to 9.1.0
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update Shakapacker dependency to version 9.1.0 across the project:
- Updated Gemfile.development_dependencies
- Updated spec/dummy/package.json
- Updated react_on_rails_pro/spec/dummy/package.json
- Ran bundle install and yarn install to update lock files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Gemfile.development_dependencies           |  2 +-
 Gemfile.lock                               |  4 ++--
 react_on_rails_pro/spec/dummy/package.json |  2 +-
 react_on_rails_pro/spec/dummy/yarn.lock    | 13 +++++++------
 spec/dummy/package.json                    |  2 +-
 spec/dummy/yarn.lock                       |  8 ++++----
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/Gemfile.development_dependencies b/Gemfile.development_dependencies
index 30acfd8ab5..b3c3e13991 100644
--- a/Gemfile.development_dependencies
+++ b/Gemfile.development_dependencies
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-gem "shakapacker", "9.0.0"
+gem "shakapacker", "9.1.0"
 gem "bootsnap", require: false
 gem "rails", "~> 7.1"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 2d83409248..5b03f49118 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -342,7 +342,7 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     semantic_range (3.1.0)
-    shakapacker (9.0.0)
+    shakapacker (9.1.0)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -440,7 +440,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (= 4.9.0)
-  shakapacker (= 9.0.0)
+  shakapacker (= 9.1.0)
   spring (~> 4.0)
   sprockets (~> 4.0)
   sqlite3 (~> 1.6)
diff --git a/react_on_rails_pro/spec/dummy/package.json b/react_on_rails_pro/spec/dummy/package.json
index 055bc02474..a91a72f04a 100644
--- a/react_on_rails_pro/spec/dummy/package.json
+++ b/react_on_rails_pro/spec/dummy/package.json
@@ -63,7 +63,7 @@
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "sass-resources-loader": "^2.0.0",
-    "shakapacker": "8.0.0",
+    "shakapacker": "9.1.0",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.2.7",
     "terser-webpack-plugin": "5",
diff --git a/react_on_rails_pro/spec/dummy/yarn.lock b/react_on_rails_pro/spec/dummy/yarn.lock
index c7d322fe25..c3692e3bbb 100644
--- a/react_on_rails_pro/spec/dummy/yarn.lock
+++ b/react_on_rails_pro/spec/dummy/yarn.lock
@@ -5970,13 +5970,14 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shakapacker@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/shakapacker/-/shakapacker-8.0.0.tgz#f29537c19078af7318758c92e7a1bca4cee96bdd"
-  integrity sha512-HCdpITzIKXzGEyUWQhKzPbpwwOsgTamaPH+0kXdhM59VQxZ3NWnT5cL3DlJdAT3sGsWCJskEl3eMkQlnh9DjhA==
+shakapacker@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.1.0.tgz#6d63c4d27b9358073dd8fc3c6e79252b96d36a36"
+  integrity sha512-PL0DuzNLFJMwr5s908ImMuvejmC20WuDa7EfAPpPFU1pM5U8cPqqC4kwSdXFLfVU0Or/UqeegNyIB1sGBdSPiw==
   dependencies:
     js-yaml "^4.1.0"
     path-complete-extname "^1.0.0"
+    webpack-merge "^5.8.0"
 
 shallow-clone@^3.0.0:
   version "3.0.1"
@@ -6815,9 +6816,9 @@ webpack-manifest-plugin@^2.0.4:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
-webpack-merge@5, webpack-merge@^5.7.3:
+webpack-merge@5, webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
   integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
   dependencies:
     clone-deep "^4.0.1"
diff --git a/spec/dummy/package.json b/spec/dummy/package.json
index 5cbed3ab13..a646130a1b 100644
--- a/spec/dummy/package.json
+++ b/spec/dummy/package.json
@@ -51,7 +51,7 @@
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "sass-resources-loader": "^2.1.0",
-    "shakapacker": "9.0.0",
+    "shakapacker": "9.1.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "5.3.1",
     "url-loader": "^4.0.0",
diff --git a/spec/dummy/yarn.lock b/spec/dummy/yarn.lock
index c2c72df59e..0ec540cac4 100644
--- a/spec/dummy/yarn.lock
+++ b/spec/dummy/yarn.lock
@@ -5653,10 +5653,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shakapacker@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.0.0.tgz#36fd2e81ffa3a01075222526b2b079bfd60a6efc"
-  integrity sha512-q+8VU3AQhPpCLlZmEmyooELmpa10FPXk631rrg46pLAYO40jnEeyK01BtI0SVNvz/nI+QFz1DwZE8NKVk/PRgw==
+shakapacker@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.1.0.tgz#6d63c4d27b9358073dd8fc3c6e79252b96d36a36"
+  integrity sha512-PL0DuzNLFJMwr5s908ImMuvejmC20WuDa7EfAPpPFU1pM5U8cPqqC4kwSdXFLfVU0Or/UqeegNyIB1sGBdSPiw==
   dependencies:
     js-yaml "^4.1.0"
     path-complete-extname "^1.0.0"

From 0ec6a71de030448db75a91c13943024bfd3a33ef Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 20:02:32 -1000
Subject: [PATCH 02/15] Fix Shakapacker version mismatch in react_on_rails_pro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update Shakapacker from 8.0.0 to 9.1.0 in:
- react_on_rails_pro/Gemfile.development_dependencies
- react_on_rails_pro/spec/execjs-compatible-dummy/package.json

This fixes the version mismatch error in CI where the gem was 8.0.0
but the node package was detected as 9.1.0.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 react_on_rails_pro/Gemfile.development_dependencies |  2 +-
 .../spec/execjs-compatible-dummy/package.json       |  2 +-
 .../spec/execjs-compatible-dummy/yarn.lock          | 13 +++++++------
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/react_on_rails_pro/Gemfile.development_dependencies b/react_on_rails_pro/Gemfile.development_dependencies
index c65a5319e2..165c1ef437 100644
--- a/react_on_rails_pro/Gemfile.development_dependencies
+++ b/react_on_rails_pro/Gemfile.development_dependencies
@@ -7,7 +7,7 @@ ruby '3.3.7'
 
 gem "react_on_rails", path: "../"
 
-gem "shakapacker", "8.0.0"
+gem "shakapacker", "9.1.0"
 gem "bootsnap", require: false
 gem "rails", "~> 7.1"
 gem "puma", "~> 6"
diff --git a/react_on_rails_pro/spec/execjs-compatible-dummy/package.json b/react_on_rails_pro/spec/execjs-compatible-dummy/package.json
index 7eab87e733..f9abb3a5b4 100644
--- a/react_on_rails_pro/spec/execjs-compatible-dummy/package.json
+++ b/react_on_rails_pro/spec/execjs-compatible-dummy/package.json
@@ -30,7 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-on-rails": "link:.yalc/react-on-rails",
-    "shakapacker": "8.0.0",
+    "shakapacker": "9.1.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "5",
     "webpack": "5",
diff --git a/react_on_rails_pro/spec/execjs-compatible-dummy/yarn.lock b/react_on_rails_pro/spec/execjs-compatible-dummy/yarn.lock
index 828980a87a..eb68c33550 100644
--- a/react_on_rails_pro/spec/execjs-compatible-dummy/yarn.lock
+++ b/react_on_rails_pro/spec/execjs-compatible-dummy/yarn.lock
@@ -3657,13 +3657,14 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shakapacker@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/shakapacker/-/shakapacker-8.0.0.tgz#f29537c19078af7318758c92e7a1bca4cee96bdd"
-  integrity sha512-HCdpITzIKXzGEyUWQhKzPbpwwOsgTamaPH+0kXdhM59VQxZ3NWnT5cL3DlJdAT3sGsWCJskEl3eMkQlnh9DjhA==
+shakapacker@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.1.0.tgz#6d63c4d27b9358073dd8fc3c6e79252b96d36a36"
+  integrity sha512-PL0DuzNLFJMwr5s908ImMuvejmC20WuDa7EfAPpPFU1pM5U8cPqqC4kwSdXFLfVU0Or/UqeegNyIB1sGBdSPiw==
   dependencies:
     js-yaml "^4.1.0"
     path-complete-extname "^1.0.0"
+    webpack-merge "^5.8.0"
 
 shallow-clone@^3.0.0:
   version "3.0.1"
@@ -4050,9 +4051,9 @@ webpack-dev-server@4:
     webpack-dev-middleware "^5.3.4"
     ws "^8.13.0"
 
-webpack-merge@5, webpack-merge@^5.7.3:
+webpack-merge@5, webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
   integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
   dependencies:
     clone-deep "^4.0.1"

From 237d56e82ac90f7b49ef283cbc335cb65255e280 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 20:08:29 -1000
Subject: [PATCH 03/15] Configure Babel transpiler for Shakapacker 9.1.0 in Pro
 dummies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shakapacker 9.1.0 defaults to SWC transpiler, but the Pro dummy apps
don't have swc-loader installed. Configure them to use Babel instead
by adding javascript_transpiler: babel to shakapacker.yml.

This fixes the build error:
"Your Shakapacker config specified using swc, but swc-loader package
is not installed."

Updated:
- react_on_rails_pro/spec/dummy/config/shakapacker.yml
- react_on_rails_pro/spec/execjs-compatible-dummy/config/shakapacker.yml

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 react_on_rails_pro/spec/dummy/config/shakapacker.yml             | 1 +
 .../spec/execjs-compatible-dummy/config/shakapacker.yml          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/react_on_rails_pro/spec/dummy/config/shakapacker.yml b/react_on_rails_pro/spec/dummy/config/shakapacker.yml
index 2e1c9fd659..dab40bdf81 100644
--- a/react_on_rails_pro/spec/dummy/config/shakapacker.yml
+++ b/react_on_rails_pro/spec/dummy/config/shakapacker.yml
@@ -6,6 +6,7 @@ default: &default
   public_root_path: public
   public_output_path: packs
   nested_entries: true
+  javascript_transpiler: babel
 
   cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
diff --git a/react_on_rails_pro/spec/execjs-compatible-dummy/config/shakapacker.yml b/react_on_rails_pro/spec/execjs-compatible-dummy/config/shakapacker.yml
index 62f1bb6648..a982f1cb5f 100644
--- a/react_on_rails_pro/spec/execjs-compatible-dummy/config/shakapacker.yml
+++ b/react_on_rails_pro/spec/execjs-compatible-dummy/config/shakapacker.yml
@@ -7,6 +7,7 @@ default: &default
   public_output_path: packs
   cache_path: tmp/webpacker
   webpack_compile_output: true
+  javascript_transpiler: babel
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']

From 51f779fe402df2dd2adcd76d2ece8052ef66ef24 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 20:43:43 -1000
Subject: [PATCH 04/15] Fix webpack SCSS rule handling for Shakapacker 9.1.0
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shakapacker 9.1.0 changed how webpack rules are structured. The
findIndex approach was failing because it returned -1 when no SCSS
rule was found, causing "Cannot read properties of undefined".

Updated to use forEach pattern (matching main spec/dummy) which:
- Safely iterates through all rules
- Checks if rule.use is an array before accessing it
- Handles multiple SCSS rules if present

This fixes the build error:
"TypeError: Cannot read properties of undefined (reading 'push')"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index fb40e38181..392cf0eea2 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -26,10 +26,13 @@ const sassLoaderConfig = {
 };
 
 const baseClientWebpackConfig = generateWebpackConfig();
-const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
-  '.scss'.match(config.test),
-);
-baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+
+// Add sass-resources-loader to all SCSS rules
+baseClientWebpackConfig.module.rules.forEach((rule) => {
+  if (Array.isArray(rule.use) && rule.test && '.scss'.match(rule.test)) {
+    rule.use.push(sassLoaderConfig);
+  }
+});
 
 if (isHMR) {
   baseClientWebpackConfig.plugins.push(

From c59ea77d4efc422a2b2671854d01305416d61647 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 21:28:44 -1000
Subject: [PATCH 05/15] Add CHANGELOG entry for Shakapacker 9.1.0 upgrade
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Document the Shakapacker 9.1.0 upgrade in the Changed section,
including the webpack configuration improvements for Pro dummy apps.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23cad6a84f..0deea13650 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,12 +34,15 @@ Changes since the last non-beta release.
 #### Changed
 
 - **Shakapacker 9.0.0 Upgrade**: Upgraded Shakapacker from 8.2.0 to 9.0.0 with Babel transpiler configuration for compatibility. Key changes include:
+
   - Configured `javascript_transpiler: babel` in shakapacker.yml (Shakapacker 9.0 defaults to SWC which has PropTypes handling issues)
   - Added precompile hook support via `bin/shakapacker-precompile-hook` for ReScript builds and pack generation
   - Configured CSS Modules to use default exports (`namedExport: false`) for backward compatibility with existing `import styles from` syntax
   - Fixed webpack configuration to process SCSS rules and CSS loaders in a single pass for better performance
     [PR 1904](https://github.com/shakacode/react_on_rails/pull/1904) by [justin808](https://github.com/justin808).
 
+- **Shakapacker 9.1.0 Upgrade**: Upgraded Shakapacker from 9.0.0 to 9.1.0. This minor version update includes bug fixes and improvements. Updated webpack configuration in Pro dummy apps to use forEach pattern for better compatibility with multiple SCSS rules. [PR 1921](https://github.com/shakacode/react_on_rails/pull/1921) by [justin808](https://github.com/justin808).
+
 #### Bug Fixes
 
 - **Use as Git dependency**: All packages can now be installed as Git dependencies. This is useful for development and testing purposes. See [CONTRIBUTING.md](./CONTRIBUTING.md#git-dependencies) for documentation. [PR #1873](https://github.com/shakacode/react_on_rails/pull/1873) by [alexeyr-ci2](https://github.com/alexeyr-ci2).

From b4c4cc37d7588359507534bdf335cb6aa9323328 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 21:37:55 -1000
Subject: [PATCH 06/15] Fix SCSS rule detection to use correct RegExp test
 method
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from incorrect '.scss'.match(rule.test) to correct
rule.test.test('.scss') in webpack configuration.

The previous code was calling match() on a string with a RegExp
parameter, when it should use the RegExp's test() method to check
if a string matches the pattern.

Fixed in both:
- spec/dummy/config/webpack/commonWebpackConfig.js
- react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js            | 2 +-
 spec/dummy/config/webpack/commonWebpackConfig.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index 392cf0eea2..75ee821c71 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -29,7 +29,7 @@ const baseClientWebpackConfig = generateWebpackConfig();
 
 // Add sass-resources-loader to all SCSS rules
 baseClientWebpackConfig.module.rules.forEach((rule) => {
-  if (Array.isArray(rule.use) && rule.test && '.scss'.match(rule.test)) {
+  if (Array.isArray(rule.use) && rule.test && rule.test.test('.scss')) {
     rule.use.push(sassLoaderConfig);
   }
 });
diff --git a/spec/dummy/config/webpack/commonWebpackConfig.js b/spec/dummy/config/webpack/commonWebpackConfig.js
index 41f8a5647e..f32ac7d528 100644
--- a/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -25,7 +25,7 @@ const sassLoaderConfig = {
 baseClientWebpackConfig.module.rules.forEach((rule) => {
   if (Array.isArray(rule.use)) {
     // Add sass-resources-loader to all SCSS rules (both .scss and .module.scss)
-    if (rule.test && '.scss'.match(rule.test)) {
+    if (rule.test && rule.test.test('.scss')) {
       rule.use.push(sassLoaderConfig);
     }
 

From 1f1030ede1125c269defdb4b97c87d193f34df15 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 4 Nov 2025 22:39:56 -1000
Subject: [PATCH 07/15] Fix SCSS rule detection to use proper filename in test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed rule.test.test('.scss') to rule.test.test('example.scss')
because webpack SCSS rules typically use patterns like /\.scss$/
which require a full filename to match properly, not just the
extension.

The string '.scss' doesn't match /\.scss$/ but 'example.scss' does.

This fixes the test failures where CSS wasn't being loaded, making
React components appear as empty divs (not visible).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js            | 2 +-
 spec/dummy/config/webpack/commonWebpackConfig.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index 75ee821c71..ae1336e9b8 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -29,7 +29,7 @@ const baseClientWebpackConfig = generateWebpackConfig();
 
 // Add sass-resources-loader to all SCSS rules
 baseClientWebpackConfig.module.rules.forEach((rule) => {
-  if (Array.isArray(rule.use) && rule.test && rule.test.test('.scss')) {
+  if (Array.isArray(rule.use) && rule.test && rule.test.test('example.scss')) {
     rule.use.push(sassLoaderConfig);
   }
 });
diff --git a/spec/dummy/config/webpack/commonWebpackConfig.js b/spec/dummy/config/webpack/commonWebpackConfig.js
index f32ac7d528..dfbe7ad8a8 100644
--- a/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -25,7 +25,7 @@ const sassLoaderConfig = {
 baseClientWebpackConfig.module.rules.forEach((rule) => {
   if (Array.isArray(rule.use)) {
     // Add sass-resources-loader to all SCSS rules (both .scss and .module.scss)
-    if (rule.test && rule.test.test('.scss')) {
+    if (rule.test && rule.test.test('example.scss')) {
       rule.use.push(sassLoaderConfig);
     }
 

From dee2edf39861a7f264fed07d9d4bc09933b059ba Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 09:34:45 -1000
Subject: [PATCH 08/15] Revert Pro dummy webpack config to use original master
 approach
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The forEach approach with RegExp.test() broke Pro dummy tests.
Reverting to the original findIndex approach that was working
on master, which uses '.scss'.match(rule.test).

While '.scss'.match(rule.test) is technically backwards (should be
rule.test.test('.scss')), it works correctly and tests pass.

The main spec/dummy still uses the improved forEach pattern since
it was already updated as part of the Shakapacker 9.0 upgrade.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js  | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index ae1336e9b8..fb40e38181 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -26,13 +26,10 @@ const sassLoaderConfig = {
 };
 
 const baseClientWebpackConfig = generateWebpackConfig();
-
-// Add sass-resources-loader to all SCSS rules
-baseClientWebpackConfig.module.rules.forEach((rule) => {
-  if (Array.isArray(rule.use) && rule.test && rule.test.test('example.scss')) {
-    rule.use.push(sassLoaderConfig);
-  }
-});
+const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
+  '.scss'.match(config.test),
+);
+baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
 
 if (isHMR) {
   baseClientWebpackConfig.plugins.push(

From e3366cb78626c624f9f805dccf13f4df882e6930 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 11:48:51 -1000
Subject: [PATCH 09/15] Fix SCSS detection to match both .scss and .module.scss
 files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated the rule detection to test against both 'example.scss' and
'example.module.scss' so sass-resources-loader is applied to both
global SCSS rules and CSS Module SCSS rules.

This fixes test failures where CSS Modules weren't being processed
correctly because the detection only matched regular .scss files.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 spec/dummy/config/webpack/commonWebpackConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/dummy/config/webpack/commonWebpackConfig.js b/spec/dummy/config/webpack/commonWebpackConfig.js
index dfbe7ad8a8..a5aa600ccf 100644
--- a/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -25,7 +25,7 @@ const sassLoaderConfig = {
 baseClientWebpackConfig.module.rules.forEach((rule) => {
   if (Array.isArray(rule.use)) {
     // Add sass-resources-loader to all SCSS rules (both .scss and .module.scss)
-    if (rule.test && rule.test.test('example.scss')) {
+    if (rule.test && (rule.test.test('example.scss') || rule.test.test('example.module.scss'))) {
       rule.use.push(sassLoaderConfig);
     }
 

From 895bea87439696bf78836049085d1e8bbffe132e Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 12:09:32 -1000
Subject: [PATCH 10/15] Update Pro dummy webpack config to use forEach pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The findIndex approach with '.scss'.match(config.test) was failing
in Shakapacker 9.1.0 because the webpack rule structure changed.

Updated Pro dummy to use the same forEach pattern as main dummy:
- Tests both 'example.scss' and 'example.module.scss'
- Safely checks if rule.use is an array before pushing
- Handles both regular SCSS and CSS Module SCSS files

This fixes the build error:
"TypeError: Cannot read properties of undefined (reading 'push')"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index fb40e38181..f1e061604b 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -26,10 +26,13 @@ const sassLoaderConfig = {
 };
 
 const baseClientWebpackConfig = generateWebpackConfig();
-const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
-  '.scss'.match(config.test),
-);
-baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+
+// Add sass-resources-loader to all SCSS rules (both .scss and .module.scss)
+baseClientWebpackConfig.module.rules.forEach((rule) => {
+  if (Array.isArray(rule.use) && rule.test && (rule.test.test('example.scss') || rule.test.test('example.module.scss'))) {
+    rule.use.push(sassLoaderConfig);
+  }
+});
 
 if (isHMR) {
   baseClientWebpackConfig.plugins.push(

From 7210588583ebcb7f50ed68da469e06393ea2dd07 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 15:27:40 -1000
Subject: [PATCH 11/15] Fix Prettier formatting in Pro dummy webpack config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The commonWebpackConfig.js file had a long conditional that needed to be
split across multiple lines according to Prettier rules in the Pro package.

This was not caught by pre-commit hooks because the root .prettierignore
excludes react_on_rails_pro/, but CI runs linting separately in that
directory with its own rules.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../spec/dummy/config/webpack/commonWebpackConfig.js        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index f1e061604b..f6a7ea5aee 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -29,7 +29,11 @@ const baseClientWebpackConfig = generateWebpackConfig();
 
 // Add sass-resources-loader to all SCSS rules (both .scss and .module.scss)
 baseClientWebpackConfig.module.rules.forEach((rule) => {
-  if (Array.isArray(rule.use) && rule.test && (rule.test.test('example.scss') || rule.test.test('example.module.scss'))) {
+  if (
+    Array.isArray(rule.use) &&
+    rule.test &&
+    (rule.test.test('example.scss') || rule.test.test('example.module.scss'))
+  ) {
     rule.use.push(sassLoaderConfig);
   }
 });

From 42d8f988ff6448bfb78233ee460e0e48c189825a Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 15:34:08 -1000
Subject: [PATCH 12/15] Add ESLint to pre-commit hooks to prevent CI failures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, pre-commit hooks only ran RuboCop, Prettier, and trailing
newline checks, but did NOT run ESLint. This meant ESLint errors could
slip through and only be caught in CI.

Changes:
- Created bin/lefthook/eslint-lint hook script that auto-fixes ESLint issues
- Added ESLint hook to .lefthook.yml pre-commit configuration
- Updated CLAUDE.md to document:
  - The complete list of pre-commit hooks that run
  - The monorepo structure with separate Pro package linting
  - Why CI lints both directories separately

The hook follows the same pattern as other hooks:
- Detects changed JS/TS files (staged + unstaged + untracked)
- Runs ESLint with --fix to auto-correct issues
- Re-stages fixed files automatically

This prevents the frustrating situation where local commits succeed but
CI fails on ESLint violations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .lefthook.yml            |  3 +++
 CLAUDE.md                | 14 ++++++++++++--
 bin/lefthook/eslint-lint | 27 +++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100755 bin/lefthook/eslint-lint

diff --git a/.lefthook.yml b/.lefthook.yml
index 1010a9413f..2bae0a18fb 100644
--- a/.lefthook.yml
+++ b/.lefthook.yml
@@ -11,6 +11,9 @@ pre-commit:
     rubocop:
       run: bin/lefthook/ruby-lint all-changed
 
+    eslint:
+      run: bin/lefthook/eslint-lint all-changed
+
     prettier:
       run: bin/lefthook/prettier-format all-changed
 
diff --git a/CLAUDE.md b/CLAUDE.md
index eee2c889ab..7c9ba27d72 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -17,6 +17,12 @@ These requirements are non-negotiable. CI will fail if not followed.
 
 Git hooks will automatically run linting on **all changed files (staged + unstaged + untracked)** before each commit - making it fast while preventing CI failures!
 
+Pre-commit hooks automatically run:
+- **RuboCop** (auto-fix Ruby code style)
+- **ESLint** (auto-fix JS/TS code style)
+- **Prettier** (auto-format all supported files)
+- **Trailing newline checks** (ensure all files end with newlines)
+
 **Note:** Git hooks are for React on Rails gem developers only, not for users who install the gem.
 
 ## Development Commands
@@ -90,13 +96,17 @@ Git hooks will automatically run linting on **all changed files (staged + unstag
 
 ## Project Architecture
 
-### Dual Package Structure
+### Monorepo Structure
 
-This project maintains both a Ruby gem and an NPM package:
+This is a monorepo containing both the open-source package and the Pro package:
 
+- **Open Source**: Root directory contains the main React on Rails gem and package
+- **Pro Package**: `react_on_rails_pro/` contains the Pro features (separate linting/formatting config)
 - **Ruby gem**: Located in `lib/`, provides Rails integration and server-side rendering
 - **NPM package**: Located in `packages/react-on-rails/src/`, provides client-side React integration
 
+**IMPORTANT**: The `react_on_rails_pro/` directory has its own Prettier/ESLint configuration. When CI runs, it lints both directories separately. The pre-commit hooks will catch issues in both directories.
+
 ### Core Components
 
 #### Ruby Side (`lib/react_on_rails/`)
diff --git a/bin/lefthook/eslint-lint b/bin/lefthook/eslint-lint
new file mode 100755
index 0000000000..98992ab249
--- /dev/null
+++ b/bin/lefthook/eslint-lint
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Lint and auto-fix JS/TS files with ESLint
+set -euo pipefail
+
+CONTEXT="${1:-staged}"
+files="$(bin/lefthook/get-changed-files "$CONTEXT" '\.(js|jsx|ts|tsx)$')"
+
+if [ -z "$files" ]; then
+  echo "✅ No JS/TS files to lint with ESLint"
+  exit 0
+fi
+
+if [ "$CONTEXT" = "all-changed" ]; then
+  echo "🔍 ESLint on all changed files:"
+else
+  echo "🔍 ESLint on $CONTEXT files:"
+fi
+printf "  %s\n" $files
+
+# Run ESLint with auto-fix
+yarn run eslint $files --report-unused-disable-directives --fix
+
+# Re-stage files if running on staged or all-changed context
+if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+  echo $files | xargs -r git add
+  echo "✅ Re-staged fixed files"
+fi

From 83faebc6bc2327463da75802a6512bd48c0f6e46 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 16:04:40 -1000
Subject: [PATCH 13/15] Fix CSS Modules configuration for Shakapacker 9.x
 compatibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shakapacker 9 changed the CSS Modules default configuration from default
exports to named exports (namedExport: true). This breaks existing code
that uses `import styles from './style.module.css'` syntax.

This commit adds webpack configuration to override Shakapacker 9's CSS
Modules settings and restore backward compatibility with the v8 behavior.

Changes:
- Override namedExport: false to support default imports
- Set exportLocalsConvention: 'camelCase' to match existing usage
- Add configuration in Pro dummy commonWebpackConfig
- Matches the fix already applied to regular dummy in previous commits

This fixes CI test failures where React components weren't rendering
because CSS module imports were failing at runtime.

Related to Shakapacker upgrade from 8.0.0 to 9.1.0.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../config/webpack/commonWebpackConfig.js     | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index f6a7ea5aee..747616f98e 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -48,6 +48,37 @@ if (isHMR) {
   );
 }
 
-const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, aliasConfig);
+const commonWebpackConfig = () => {
+  const config = merge({}, baseClientWebpackConfig, commonOptions, aliasConfig);
+
+  // Fix CSS modules for Shakapacker 9.x compatibility
+  // Shakapacker 9 defaults to namedExport: true, but our code uses default imports
+  // Override to use the old behavior for backward compatibility
+  config.module.rules.forEach((rule) => {
+    if (
+      rule.test &&
+      (rule.test.test('example.module.scss') || rule.test.test('example.module.css'))
+    ) {
+      if (Array.isArray(rule.use)) {
+        rule.use.forEach((loader) => {
+          if (
+            loader.loader &&
+            loader.loader.includes('css-loader') &&
+            loader.options &&
+            loader.options.modules
+          ) {
+            // Disable named exports to support default imports
+            // eslint-disable-next-line no-param-reassign
+            loader.options.modules.namedExport = false;
+            // eslint-disable-next-line no-param-reassign
+            loader.options.modules.exportLocalsConvention = 'camelCase';
+          }
+        });
+      }
+    }
+  });
+
+  return config;
+};
 
 module.exports = commonWebpackConfig;

From 4260503551bcd03830369ec98fd734e2624438d5 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 16:06:00 -1000
Subject: [PATCH 14/15] Document webpack configuration debugging techniques in
 CLAUDE.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add comprehensive debugging guide for Webpack/Shakapacker configuration
issues, including:

- Debug script templates for inspecting webpack rules
- Step-by-step debugging workflow
- Common issues and solutions (especially CSS Modules in Shakapacker 9)
- Best practices for analyzing webpack configuration

This documentation captures the debugging approach used to identify and
fix the CSS Modules issue during the Shakapacker 9.1.0 upgrade.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 CLAUDE.md | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 7c9ba27d72..90c1825575 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -137,6 +137,94 @@ This is a monorepo containing both the open-source package and the Pro package:
 - **Examples**: Generated via rake tasks for different webpack configurations
 - **Rake tasks**: Defined in `rakelib/` for various development operations
 
+## Debugging Webpack Configuration Issues
+
+When encountering issues with Webpack/Shakapacker configuration (e.g., components not rendering, CSS modules failing), use this debugging approach:
+
+### 1. Create Debug Scripts
+
+Create temporary debug scripts in the dummy app root to inspect the actual webpack configuration:
+
+```javascript
+// debug-webpack-rules.js - Inspect all webpack rules
+const { generateWebpackConfig } = require('shakapacker');
+
+const config = generateWebpackConfig();
+
+console.log('=== Webpack Rules ===');
+console.log(`Total rules: ${config.module.rules.length}\n`);
+
+config.module.rules.forEach((rule, index) => {
+  console.log(`\nRule ${index}:`);
+  console.log('  test:', rule.test);
+  console.log('  use:', Array.isArray(rule.use) ? rule.use.map(u => typeof u === 'string' ? u : u.loader) : rule.use);
+
+  if (rule.test) {
+    console.log('  Matches .scss:', rule.test.test && rule.test.test('example.scss'));
+    console.log('  Matches .module.scss:', rule.test.test && rule.test.test('example.module.scss'));
+  }
+});
+```
+
+```javascript
+// debug-webpack-with-config.js - Inspect config AFTER modifications
+const commonWebpackConfig = require('./config/webpack/commonWebpackConfig');
+
+const config = commonWebpackConfig();
+
+console.log('=== Webpack Rules AFTER commonWebpackConfig ===');
+config.module.rules.forEach((rule, index) => {
+  if (rule.test && rule.test.test('example.module.scss')) {
+    console.log(`\nRule ${index} (CSS Modules):`);
+    if (Array.isArray(rule.use)) {
+      rule.use.forEach((loader, i) => {
+        if (loader.loader && loader.loader.includes('css-loader')) {
+          console.log(`  css-loader options:`, loader.options);
+        }
+      });
+    }
+  }
+});
+```
+
+### 2. Run Debug Scripts
+
+```bash
+cd spec/dummy  # or react_on_rails_pro/spec/dummy
+NODE_ENV=test RAILS_ENV=test node debug-webpack-rules.js
+NODE_ENV=test RAILS_ENV=test node debug-webpack-with-config.js
+```
+
+### 3. Analyze Output
+
+- Verify the rules array structure matches expectations
+- Check that loader options are correctly set
+- Confirm rules only match intended file patterns
+- Ensure modifications don't break existing loaders
+
+### 4. Common Issues & Solutions
+
+**CSS Modules breaking after Shakapacker upgrade:**
+- Shakapacker 9.0+ defaults to `namedExport: true` for CSS Modules
+- Existing code using `import styles from './file.module.css'` will fail
+- Override in webpack config:
+  ```javascript
+  loader.options.modules.namedExport = false;
+  loader.options.modules.exportLocalsConvention = 'camelCase';
+  ```
+
+**Rules not matching expected files:**
+- Use `.test.test('example.file')` to check regex matching
+- Shakapacker may combine multiple file extensions in single rules
+- Test with actual filenames from your codebase
+
+### 5. Clean Up
+
+Always remove debug scripts before committing:
+```bash
+rm debug-*.js
+```
+
 ## Important Notes
 
 - Use `yalc` for local development when testing with external apps

From f0a1b0f3cb0d115407b32beeab3c9b991390b17f Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Wed, 5 Nov 2025 16:20:50 -1000
Subject: [PATCH 15/15] Fix pre-commit hooks to properly lint Pro directory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous hooks only linted files in the root directory, but the
react_on_rails_pro/ directory has its own ESLint and Prettier configs
that need to be run separately. This caused CI failures when Pro files
had linting issues that weren't caught locally.

Changes:
1. Updated bin/lefthook/eslint-lint to:
   - Separate files into root and Pro directories
   - Run ESLint in Pro directory with Pro's config for Pro files
   - Track exit codes and fail if either check fails

2. Updated bin/lefthook/prettier-format to:
   - Separate files into root and Pro directories
   - Run Prettier in Pro directory with Pro's config for Pro files

3. Fixed Prettier formatting in commonWebpackConfig.js:
   - Condensed multi-line conditional to single line per Pro's config

This ensures local pre-commit hooks match CI behavior exactly, preventing
the frustrating situation where commits succeed locally but fail in CI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 bin/lefthook/eslint-lint                      | 59 +++++++++++++++----
 bin/lefthook/prettier-format                  | 48 +++++++++++----
 .../config/webpack/commonWebpackConfig.js     |  5 +-
 3 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/bin/lefthook/eslint-lint b/bin/lefthook/eslint-lint
index 98992ab249..4147c46e38 100755
--- a/bin/lefthook/eslint-lint
+++ b/bin/lefthook/eslint-lint
@@ -10,18 +10,55 @@ if [ -z "$files" ]; then
   exit 0
 fi
 
-if [ "$CONTEXT" = "all-changed" ]; then
-  echo "🔍 ESLint on all changed files:"
-else
-  echo "🔍 ESLint on $CONTEXT files:"
+# Separate files into root and Pro directories
+root_files=$(echo "$files" | grep -v '^react_on_rails_pro/' || true)
+pro_files=$(echo "$files" | grep '^react_on_rails_pro/' || true)
+
+exit_code=0
+
+# Lint root files
+if [ -n "$root_files" ]; then
+  if [ "$CONTEXT" = "all-changed" ]; then
+    echo "🔍 ESLint on root changed files:"
+  else
+    echo "🔍 ESLint on root $CONTEXT files:"
+  fi
+  printf "  %s\n" $root_files
+
+  if ! yarn run eslint $root_files --report-unused-disable-directives --fix; then
+    exit_code=1
+  fi
+
+  # Re-stage files if running on staged or all-changed context
+  if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+    echo $root_files | xargs -r git add
+  fi
 fi
-printf "  %s\n" $files
 
-# Run ESLint with auto-fix
-yarn run eslint $files --report-unused-disable-directives --fix
+# Lint Pro files (using Pro's ESLint config)
+if [ -n "$pro_files" ]; then
+  if [ "$CONTEXT" = "all-changed" ]; then
+    echo "🔍 ESLint on Pro changed files:"
+  else
+    echo "🔍 ESLint on Pro $CONTEXT files:"
+  fi
+  printf "  %s\n" $pro_files
+
+  # Strip react_on_rails_pro/ prefix for running in Pro directory
+  pro_files_relative=$(echo "$pro_files" | sed 's|^react_on_rails_pro/||')
 
-# Re-stage files if running on staged or all-changed context
-if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
-  echo $files | xargs -r git add
-  echo "✅ Re-staged fixed files"
+  if ! (cd react_on_rails_pro && yarn run eslint $pro_files_relative --report-unused-disable-directives --fix); then
+    exit_code=1
+  fi
+
+  # Re-stage files if running on staged or all-changed context
+  if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+    echo $pro_files | xargs -r git add
+  fi
+fi
+
+if [ $exit_code -eq 0 ]; then
+  echo "✅ ESLint checks passed"
 fi
+
+exit $exit_code
diff --git a/bin/lefthook/prettier-format b/bin/lefthook/prettier-format
index 728f2f432c..44a7cbf786 100755
--- a/bin/lefthook/prettier-format
+++ b/bin/lefthook/prettier-format
@@ -10,17 +10,45 @@ if [ -z "$files" ]; then
   exit 0
 fi
 
-if [ "$CONTEXT" = "all-changed" ]; then
-  echo "💅 Prettier on all changed files:"
-else
-  echo "💅 Prettier on $CONTEXT files:"
+# Separate files into root and Pro directories
+root_files=$(echo "$files" | grep -v '^react_on_rails_pro/' || true)
+pro_files=$(echo "$files" | grep '^react_on_rails_pro/' || true)
+
+# Format root files
+if [ -n "$root_files" ]; then
+  if [ "$CONTEXT" = "all-changed" ]; then
+    echo "💅 Prettier on root changed files:"
+  else
+    echo "💅 Prettier on root $CONTEXT files:"
+  fi
+  printf "  %s\n" $root_files
+
+  yarn run prettier --write $root_files
+
+  # Re-stage files if running on staged or all-changed context
+  if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+    echo $root_files | xargs -r git add
+  fi
 fi
-printf "  %s\n" $files
 
-yarn run prettier --write $files
+# Format Pro files (using Pro's Prettier config)
+if [ -n "$pro_files" ]; then
+  if [ "$CONTEXT" = "all-changed" ]; then
+    echo "💅 Prettier on Pro changed files:"
+  else
+    echo "💅 Prettier on Pro $CONTEXT files:"
+  fi
+  printf "  %s\n" $pro_files
 
-# Re-stage files if running on staged or all-changed context
-if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
-  echo $files | xargs -r git add
-  echo "✅ Re-staged formatted files"
+  # Strip react_on_rails_pro/ prefix for running in Pro directory
+  pro_files_relative=$(echo "$pro_files" | sed 's|^react_on_rails_pro/||')
+
+  (cd react_on_rails_pro && yarn run prettier --write $pro_files_relative)
+
+  # Re-stage files if running on staged or all-changed context
+  if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+    echo $pro_files | xargs -r git add
+  fi
 fi
+
+echo "✅ Prettier formatting complete"
diff --git a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
index 747616f98e..608c219e7a 100644
--- a/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
+++ b/react_on_rails_pro/spec/dummy/config/webpack/commonWebpackConfig.js
@@ -55,10 +55,7 @@ const commonWebpackConfig = () => {
   // Shakapacker 9 defaults to namedExport: true, but our code uses default imports
   // Override to use the old behavior for backward compatibility
   config.module.rules.forEach((rule) => {
-    if (
-      rule.test &&
-      (rule.test.test('example.module.scss') || rule.test.test('example.module.css'))
-    ) {
+    if (rule.test && (rule.test.test('example.module.scss') || rule.test.test('example.module.css'))) {
       if (Array.isArray(rule.use)) {
         rule.use.forEach((loader) => {
           if (