Migrate to Shakapacker 9.0.0-beta.8

Updates Shakapacker from beta.7 to beta.8. The main change required was fixing the webpack config to properly detect SCSS rules, as the rule structure changed in beta.8 to include a new oneOf pattern at index 0. Changes: - Update Shakapacker version in Gemfile and package.json - Fix commonWebpackConfig.js to find SCSS rules that have a 'use' array - Add null safety checks for scssRule properties 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

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"