diff --git a/Gemfile b/Gemfile
index 184a3c8a..3cad0bae 100644
--- a/Gemfile
+++ b/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"
diff --git a/Gemfile.lock b/Gemfile.lock
index dc0c0af8..3bb28892 100644
--- a/Gemfile.lock
+++ b/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)
diff --git a/config/webpack/commonWebpackConfig.js b/config/webpack/commonWebpackConfig.js
index 1be541fe..9f18dc83 100644
--- a/config/webpack/commonWebpackConfig.js
+++ b/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);
diff --git a/package.json b/package.json
index 5d991e6a..76f9326e 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 0e0e3e7f..0e023e9d 100644
--- a/yarn.lock
+++ b/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"