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"