Migrate to Shakapacker 9.0.0-beta.8 (#665)

Updates Shakapacker from 9.0.0-beta.7 to 9.0.0-beta.8 with minimal changes.
The primary fix addresses a breaking change in the webpack configuration
structure introduced in beta.8.

Key Changes:
- Updated Shakapacker to 9.0.0-beta.8 in Gemfile and package.json
- Fixed commonWebpackConfig.js to properly detect SCSS rules in the new
  webpack config structure
- Added defensive edge case handling for missing SCSS rules
- Removed redundant null checks and added ESLint-compliant formatting

Technical Details:
Shakapacker beta.8 introduced a new webpack rule structure with a oneOf
pattern at index 0 that matches .scss files but lacks a use array. The
original code would find this incorrect rule and crash when attempting to
access the use property.

The fix modifies the SCSS rule finder to require both a test match AND a
use array, ensuring it finds the correct rule with configured loaders. An
additional safety check warns if no valid SCSS rule is found, preventing
runtime errors.

Breaking Changes:
None. This is a patch-level update with no API changes.

Impact:
- Existing installations: Update dependencies and rebuild assets
- New installations: No special considerations
- Build process remains identical
- All existing webpack configurations continue to work

Testing:
- Full test build passes (yarn build:test)
- RuboCop linting passes
- Production build verified
- No behavioral changes to asset pipeline

Related Issues:
Follow-up migrations planned in separate PRs:
- Issue #666: Migrate from Babel to SWC transpiler
- Issue #667: Migrate to TypeScript
- Issue #668: Migrate from Webpack to Rspack

Author: justin808

Gemfile

@@ -6,7 +6,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby "3.3.4"
 
 gem "react_on_rails", "16.1.1"
-gem "shakapacker", "9.0.0.beta.7"
+gem "shakapacker", "9.0.0.beta.8"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"

Gemfile.lock

@@ -390,7 +390,7 @@ GEM
       websocket (~> 1.0)
     semantic_range (3.1.0)
     sexp_processor (4.17.1)
-    shakapacker (9.0.0.beta.7)
+    shakapacker (9.0.0.beta.8)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -499,7 +499,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 9.0.0.beta.7)
+  shakapacker (= 9.0.0.beta.8)
   spring
   spring-commands-rspec
   stimulus-rails (~> 1.3)

config/webpack/commonWebpackConfig.js

@@ -24,45 +24,49 @@ const ignoreWarningsConfig = {
 };
 
 const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
-  '.scss'.match(config.test),
+  '.scss'.match(config.test) && config.use,
 );
 
-// Configure sass-loader to use the modern API
-const scssRule = baseClientWebpackConfig.module.rules[scssConfigIndex];
-const sassLoaderIndex = scssRule.use.findIndex((loader) => {
-  if (typeof loader === 'string') {
-    return loader.includes('sass-loader');
-  }
-  return loader.loader && loader.loader.includes('sass-loader');
-});
+if (scssConfigIndex === -1) {
+  console.warn('No SCSS rule with use array found in webpack config');
+} else {
+  // Configure sass-loader to use the modern API
+  const scssRule = baseClientWebpackConfig.module.rules[scssConfigIndex];
+  const sassLoaderIndex = scssRule.use.findIndex((loader) => {
+    if (typeof loader === 'string') {
+      return loader.includes('sass-loader');
+    }
+    return loader.loader && loader.loader.includes('sass-loader');
+  });
 
-if (sassLoaderIndex !== -1) {
-  const sassLoader = scssRule.use[sassLoaderIndex];
-  if (typeof sassLoader === 'string') {
-    scssRule.use[sassLoaderIndex] = {
-      loader: sassLoader,
-      options: {
-        api: 'modern'
-      }
-    };
-  } else {
-    sassLoader.options = sassLoader.options || {};
-    sassLoader.options.api = 'modern';
+  if (sassLoaderIndex !== -1) {
+    const sassLoader = scssRule.use[sassLoaderIndex];
+    if (typeof sassLoader === 'string') {
+      scssRule.use[sassLoaderIndex] = {
+        loader: sassLoader,
+        options: {
+          api: 'modern'
+        }
+      };
+    } else {
+      sassLoader.options = sassLoader.options || {};
+      sassLoader.options.api = 'modern';
+    }
   }
-}
 
-// Fix css-loader configuration for CSS modules if namedExport is enabled
-// When namedExport is true, exportLocalsConvention must be camelCaseOnly or dashesOnly
-const cssLoader = scssRule.use.find(loader => {
-  const loaderName = typeof loader === 'string' ? loader : loader?.loader;
-  return loaderName?.includes('css-loader');
-});
+  // Fix css-loader configuration for CSS modules if namedExport is enabled
+  // When namedExport is true, exportLocalsConvention must be camelCaseOnly or dashesOnly
+  const cssLoader = scssRule.use.find((loader) => {
+    const loaderName = typeof loader === 'string' ? loader : loader?.loader;
+    return loaderName?.includes('css-loader');
+  });
 
-if (cssLoader?.options?.modules?.namedExport) {
-  cssLoader.options.modules.exportLocalsConvention = 'camelCaseOnly';
-}
+  if (cssLoader?.options?.modules?.namedExport) {
+    cssLoader.options.modules.exportLocalsConvention = 'camelCaseOnly';
+  }
 
-baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+  baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+}
 
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
 const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);

package.json

@@ -93,7 +93,7 @@
     "sass": "^1.58.3",
     "sass-loader": "^13.3.2",
     "sass-resources-loader": "^2.2.5",
-    "shakapacker": "9.0.0-beta.7",
+    "shakapacker": "9.0.0-beta.8",
     "stimulus": "^3.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.3.3",

yarn.lock

@@ -8263,10 +8263,10 @@ setprototypeof@1.2.0:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shakapacker@9.0.0-beta.7:
-  version "9.0.0-beta.7"
-  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.0.0-beta.7.tgz#c00b9590b84f365bf0fd4e7b7efdd59104901a00"
-  integrity sha512-m4xGyTg9yy4ys+wz44jBdygsxwKDbARBlgYqsyirwowQKWZHqnyb+ucS9yz5cKQHUtHeDlJOhPHKhRsCwhJcDQ==
+shakapacker@9.0.0-beta.8:
+  version "9.0.0-beta.8"
+  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-9.0.0-beta.8.tgz#ab951f8ab575d1c178639c2048a296ae27c9a467"
+  integrity sha512-NPu5cTB6lL/Bzl8XDl1NfjlljLARWPH9YhjIh1CvXEuSdaNP2qJLSiIr68Bqv3IGHQmqtifgRl1iXQB8pNnAfQ==
   dependencies:
     js-yaml "^4.1.0"
     path-complete-extname "^1.0.0"