Update to Shakapacker 9.1.0 and migrate to Rspack

Gemfile

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

Gemfile.lock

@@ -383,7 +383,7 @@ GEM
       websocket (~> 1.0)
     semantic_range (3.1.0)
     sexp_processor (4.17.1)
-    shakapacker (9.0.0.beta.8)
+    shakapacker (9.1.0)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -493,7 +493,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 9.0.0.beta.8)
+  shakapacker (= 9.1.0)
   spring
   spring-commands-rspec
   stimulus-rails (~> 1.3)
@@ -502,7 +502,7 @@ DEPENDENCIES
   web-console
 
 RUBY VERSION
-   ruby 3.4.6p54
+   ruby 3.4.6p32
 
 BUNDLED WITH
    2.4.17

README.md

@@ -165,10 +165,46 @@ See package.json and Gemfile for versions
 + **Testing Mode**: When running tests, it is useful to run `foreman start -f Procfile.spec` in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)`
 line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.
 
-## Webpack
+## Webpack and Rspack
 
-_Converted to use Shakapacker webpack configuration_.
+_Converted to use Shakapacker with support for both Webpack and Rspack bundlers_.
 
+This project supports both Webpack and Rspack as JavaScript bundlers via [Shakapacker](https://github.com/shakacode/shakapacker). Switch between them by changing the `assets_bundler` setting in `config/shakapacker.yml`:
+
+```yaml
+# Use Rspack (default - faster builds)
+assets_bundler: rspack
+
+# Or use Webpack (classic, stable)
+assets_bundler: webpack
+```
+
+### Performance Comparison
+
+Measured bundler compile times for this project (client + server bundles):
+
+| Build Type | Webpack | Rspack | Improvement |
+|------------|---------|--------|-------------|
+| Development | ~3.1s | ~1.0s | **~3x faster** |
+| Production (cold) | ~22s | ~10.7s | **~2x faster** |
+
+**Benefits of Rspack:**
+- 67% faster development builds (saves ~2.1s per incremental build)
+- 51% faster production builds (saves ~11s on cold builds)
+- Faster incremental rebuilds during development
+- Reduced CI build times
+- Drop-in replacement - same configuration files work for both bundlers
+
+_Note: These are actual bundler compile times. Total build times including package manager overhead may vary._
+
+### Configuration Files
+
+All bundler configuration is in `config/webpack/`:
+- `webpack.config.js` - Main entry point (auto-detects Webpack or Rspack)
+- `commonWebpackConfig.js` - Shared configuration
+- `clientWebpackConfig.js` - Client bundle settings
+- `serverWebpackConfig.js` - Server-side rendering bundle
+- `development.js`, `production.js`, `test.js` - Environment-specific settings
 
 ### Additional Resources
 - [Webpack Docs](https://webpack.js.org/)

bin/shakapacker

@@ -2,12 +2,10 @@
 
 ENV["RAILS_ENV"] ||= "development"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+ENV["APP_ROOT"] ||= File.expand_path("..", __dir__)
 
 require "bundler/setup"
 require "shakapacker"
-require "shakapacker/webpack_runner"
+require "shakapacker/runner"
 
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Shakapacker::WebpackRunner.run(ARGV)
-end
+Shakapacker::Runner.run(ARGV)

config/shakapacker.yml

@@ -9,6 +9,7 @@ default: &default
   webpack_compile_output: true
   nested_entries: true
   javascript_transpiler: swc
+  assets_bundler: rspack
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']

config/swc.config.js

@@ -10,8 +10,8 @@ const customConfig = {
       loose: false,
       transform: {
         react: {
-          // Use automatic runtime (React 17+) - no need to import React
-          runtime: 'automatic',
+          // Use classic runtime for better SSR compatibility with React on Rails
+          runtime: 'classic',
           // Enable React Fast Refresh in development
           refresh: env.isDevelopment && env.runningWebpackDevServer,
         },

config/webpack/bundlerUtils.js

@@ -0,0 +1,44 @@
+/**
+ * Bundler utilities for automatic Webpack/Rspack detection.
+ *
+ * Shakapacker 9.1+ supports both Webpack and Rspack as bundlers.
+ * The bundler is selected via config/shakapacker.yml:
+ *   assets_bundler: webpack  # or 'rspack'
+ */
+
+const { config } = require('shakapacker');
+
+/**
+ * Gets the appropriate bundler module based on shakapacker.yml configuration.
+ *
+ * @returns {Object} Either webpack or @rspack/core module
+ */
+const getBundler = () => {
+  return config.assets_bundler === 'rspack'
+    ? require('@rspack/core')
+    : require('webpack');
+};
+
+/**
+ * Checks if the current bundler is Rspack.
+ *
+ * @returns {boolean} True if using Rspack, false if using Webpack
+ */
+const isRspack = () => config.assets_bundler === 'rspack';
+
+/**
+ * Gets the appropriate CSS extraction plugin for the current bundler.
+ *
+ * @returns {Object} Either mini-css-extract-plugin (Webpack) or CssExtractRspackPlugin (Rspack)
+ */
+const getCssExtractPlugin = () => {
+  return isRspack()
+    ? getBundler().CssExtractRspackPlugin
+    : require('mini-css-extract-plugin');
+};
+
+module.exports = {
+  getBundler,
+  isRspack,
+  getCssExtractPlugin,
+};

config/webpack/client.js

@@ -1,16 +1,21 @@
 const devBuild = process.env.NODE_ENV === 'development';
 const isHMR = process.env.WEBPACK_DEV_SERVER === 'TRUE';
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const webpack = require('webpack');
+const { config } = require('shakapacker');
 const environment = require('./environment');
 
+// Auto-detect bundler from shakapacker config and load the appropriate library
+const bundler = config.assets_bundler === 'rspack'
+  ? require('@rspack/core')
+  : require('webpack');
+
 if (devBuild && !isHMR) {
   environment.loaders.get('sass').use.find((item) => item.loader === 'sass-loader').options.sourceMap = false;
 }
 
 environment.plugins.append(
   'Provide',
-  new webpack.ProvidePlugin({
+  new bundler.ProvidePlugin({
     $: 'jquery',
     jQuery: 'jquery',
     jquery: 'jquery',

config/webpack/clientWebpackConfig.js

@@ -1,14 +1,15 @@
 // The source code including full typescript support is available at:
 // https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js
 
-const webpack = require('webpack');
 const commonWebpackConfig = require('./commonWebpackConfig');
+const { getBundler } = require('./bundlerUtils');
 
 const configureClient = () => {
+  const bundler = getBundler();
   const clientConfig = commonWebpackConfig();
 
   clientConfig.plugins.push(
-    new webpack.ProvidePlugin({
+    new bundler.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       ActionCable: '@rails/actioncable',

config/webpack/commonWebpackConfig.js

@@ -4,14 +4,14 @@
 // Common configuration applying to client and server configuration
 const { generateWebpackConfig, merge } = require('shakapacker');
 
-const baseClientWebpackConfig = generateWebpackConfig();
 const commonOptions = {
   resolve: {
-    extensions: ['.css', '.ts', '.tsx'],
+    // Add .bs.js extension for ReScript-compiled modules
+    extensions: ['.css', '.ts', '.tsx', '.bs.js'],
   },
 };
 
-// add sass resource loader
+// Sass resource loader config - globally imports app variables
 const sassLoaderConfig = {
   loader: 'sass-resources-loader',
   options: {
@@ -20,56 +20,87 @@ const sassLoaderConfig = {
 };
 
 const ignoreWarningsConfig = {
+  // React 19 uses react-dom/client but not all deps have migrated yet
   ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
 };
 
-const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
-  '.scss'.match(config.test) && config.use,
-);
+/**
+ * Generates the common webpack/rspack configuration used by both client and server bundles.
+ *
+ * IMPORTANT: This function calls generateWebpackConfig() fresh on each invocation, so mutations
+ * to the returned config are safe and won't affect other builds. The config is regenerated
+ * for each build (client, server, etc.).
+ *
+ * Key customizations:
+ * - CSS Modules: Configured for default exports (namedExport: false) for backward compatibility
+ * - Sass: Configured with modern API and global variable imports
+ * - ReScript: Added .bs.js to resolve extensions
+ *
+ * @returns {Object} Webpack/Rspack configuration object (auto-detected based on shakapacker.yml)
+ */
+const commonWebpackConfig = () => {
+  // Generate fresh config - safe to mutate since it's a new object each time
+  const baseWebpackConfig = generateWebpackConfig();
 
-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');
+  // Fix CSS Modules to use default exports for backward compatibility
+  // Shakapacker 9 changed default to namedExport: true, breaking existing imports like:
+  // import css from './file.module.scss'
+  // This ensures css is an object with properties, not undefined
+  baseWebpackConfig.module.rules.forEach((rule) => {
+    if (rule.use && Array.isArray(rule.use)) {
+      const cssLoader = rule.use.find((loader) => {
+        const loaderName = typeof loader === 'string' ? loader : loader?.loader;
+        return loaderName?.includes('css-loader');
+      });
+
+      if (cssLoader?.options?.modules) {
+        cssLoader.options.modules.namedExport = false;
+        cssLoader.options.modules.exportLocalsConvention = 'camelCase';
+      }
     }
-    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';
-    }
-  }
+  const scssConfigIndex = baseWebpackConfig.module.rules.findIndex((config) =>
+    '.scss'.match(config.test) && config.use,
+  );
 
-  // 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 (scssConfigIndex === -1) {
+    console.warn('No SCSS rule with use array found in webpack config');
+    // Not throwing error since config might work without SCSS
+  } else {
+    // Configure sass-loader to use the modern API
+    const scssRule = baseWebpackConfig.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 (cssLoader?.options?.modules?.namedExport) {
-    cssLoader.options.modules.exportLocalsConvention = 'camelCaseOnly';
-  }
+    if (sassLoaderIndex !== -1) {
+      const sassLoader = scssRule.use[sassLoaderIndex];
+      if (typeof sassLoader === 'string') {
+        scssRule.use[sassLoaderIndex] = {
+          loader: sassLoader,
+          options: {
+            // Use modern API for better performance and to support sass-resources-loader
+            // The modern API uses the Sass JavaScript API instead of the legacy Node API
+            api: 'modern'
+          }
+        };
+      } else {
+        sassLoader.options = sassLoader.options || {};
+        // Use modern API for better performance and to support sass-resources-loader
+        // The modern API uses the Sass JavaScript API instead of the legacy Node API
+        sassLoader.options.api = 'modern';
+      }
+    }
 
-  baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
-}
+    baseWebpackConfig.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);
+  return merge({}, baseWebpackConfig, commonOptions, ignoreWarningsConfig);
+};
 
 module.exports = commonWebpackConfig;
 

config/webpack/server.js

@@ -1,16 +1,20 @@
 const merge = require('webpack-merge');
 
 const devBuild = process.env.NODE_ENV === 'production' ? 'production' : 'development';
-const webpack = require('webpack');
-
+const { config } = require('shakapacker');
 const environment = require('./environment');
 
+// Auto-detect bundler from shakapacker config and load the appropriate library
+const bundler = config.assets_bundler === 'rspack'
+  ? require('@rspack/core')
+  : require('webpack');
+
 // React Server Side Rendering shakapacker config
 // Builds a Node compatible file that React on Rails can load, never served to the client.
 
 environment.plugins.insert(
   'DefinePlugin',
-  new webpack.DefinePlugin({
+  new bundler.DefinePlugin({
     TRACE_TURBOLINKS: true,
     'process.env': {
       NODE_ENV: devBuild,