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

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)

client/app/libs/i18n/default.js

@@ -0,0 +1,9 @@
+// Default locale and messages for i18n
+export const defaultLocale = 'en';
+
+export const defaultMessages = {
+  'app.name': 'React Webpack Rails Tutorial',
+  'comment.form.name_label': 'Name',
+  'comment.form.text_label': 'Text',
+  'comment.form.submit': 'Submit',
+};

client/app/libs/i18n/translations.js

@@ -0,0 +1,15 @@
+// Translation messages for different locales
+export const translations = {
+  en: {
+    'app.name': 'React Webpack Rails Tutorial',
+    'comment.form.name_label': 'Name',
+    'comment.form.text_label': 'Text',
+    'comment.form.submit': 'Submit',
+  },
+  es: {
+    'app.name': 'Tutorial de React Webpack Rails',
+    'comment.form.name_label': 'Nombre',
+    'comment.form.text_label': 'Texto',
+    'comment.form.submit': 'Enviar',
+  },
+};

config/rspack/alias.js

@@ -0,0 +1,9 @@
+const { resolve } = require('path');
+
+module.exports = {
+  resolve: {
+    alias: {
+      Assets: resolve(__dirname, '..', '..', 'client', 'app', 'assets'),
+    },
+  },
+};

config/rspack/clientRspackConfig.js

@@ -0,0 +1,24 @@
+const rspack = require('@rspack/core');
+const commonRspackConfig = require('./commonRspackConfig');
+
+const configureClient = () => {
+  const clientConfig = commonRspackConfig();
+
+  clientConfig.plugins.push(
+    new rspack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      ActionCable: '@rails/actioncable',
+    }),
+  );
+
+  // server-bundle is special and should ONLY be built by the serverConfig
+  // In case this entry is not deleted, a very strange "window" not found
+  // error shows referring to window["webpackJsonp"]. That is because the
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle'];
+
+  return clientConfig;
+};
+
+module.exports = configureClient;

config/rspack/commonRspackConfig.js

@@ -0,0 +1,79 @@
+// Common configuration applying to client and server configuration
+const { generateWebpackConfig, merge } = require('shakapacker');
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx', '.bs.js'],
+  },
+};
+
+// add sass resource loader
+const sassLoaderConfig = {
+  loader: 'sass-resources-loader',
+  options: {
+    resources: './client/app/assets/styles/app-variables.scss',
+  },
+};
+
+const ignoreWarningsConfig = {
+  ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
+};
+
+// Copy the object using merge b/c the baseClientRspackConfig and commonOptions are mutable globals
+const commonRspackConfig = () => {
+  const baseClientRspackConfig = generateWebpackConfig();
+
+  // Fix all CSS-related loaders to use default exports instead of named exports
+  // Shakapacker 9 defaults to namedExport: true, but existing code expects default exports
+  baseClientRspackConfig.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';
+      }
+    }
+  });
+
+  const scssConfigIndex = baseClientRspackConfig.module.rules.findIndex((config) =>
+    '.scss'.match(config.test) && config.use,
+  );
+
+  if (scssConfigIndex === -1) {
+    console.warn('No SCSS rule with use array found in rspack config');
+  } else {
+    // Configure sass-loader to use the modern API
+    const scssRule = baseClientRspackConfig.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';
+      }
+    }
+
+    baseClientRspackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+  }
+
+  return merge({}, baseClientRspackConfig, commonOptions, ignoreWarningsConfig);
+};
+
+module.exports = commonRspackConfig;

config/rspack/development.js

@@ -0,0 +1,25 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const { devServer, inliningCss } = require('shakapacker');
+
+const rspackConfig = require('./rspackConfig');
+
+const developmentEnvOnly = (clientRspackConfig, _serverRspackConfig) => {
+  // plugins
+  if (inliningCss) {
+    // Note, when this is run, we're building the server and client bundles in separate processes.
+    // Thus, this plugin is not applied to the server bundle.
+
+    // eslint-disable-next-line global-require
+    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+    clientRspackConfig.plugins.push(
+      new ReactRefreshWebpackPlugin({
+        overlay: {
+          sockPort: devServer.port,
+        },
+      }),
+    );
+  }
+};
+
+module.exports = rspackConfig(developmentEnvOnly);

config/rspack/production.js

@@ -0,0 +1,9 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+const rspackConfig = require('./rspackConfig');
+
+const productionEnvOnly = (_clientRspackConfig, _serverRspackConfig) => {
+  // place any code here that is for production only
+};
+
+module.exports = rspackConfig(productionEnvOnly);

config/rspack/rspack.config.js

@@ -0,0 +1,15 @@
+const { env, generateWebpackConfig } = require('shakapacker');
+const { existsSync } = require('fs');
+const { resolve } = require('path');
+
+const envSpecificConfig = () => {
+  const path = resolve(__dirname, `${env.nodeEnv}.js`);
+  if (existsSync(path)) {
+    console.log(`Loading ENV specific rspack configuration file ${path}`);
+    return require(path);
+  }
+
+  return generateWebpackConfig();
+};
+
+module.exports = envSpecificConfig();

config/rspack/rspackConfig.js

@@ -0,0 +1,34 @@
+const clientRspackConfig = require('./clientRspackConfig');
+const serverRspackConfig = require('./serverRspackConfig');
+
+const rspackConfig = (envSpecific) => {
+  const clientConfig = clientRspackConfig();
+  const serverConfig = serverRspackConfig();
+
+  if (envSpecific) {
+    envSpecific(clientConfig, serverConfig);
+  }
+
+  let result;
+  // For HMR, need to separate the the client and server rspack configurations
+  if (process.env.WEBPACK_SERVE || process.env.CLIENT_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the client bundles.');
+    result = clientConfig;
+  } else if (process.env.SERVER_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the server bundle.');
+    result = serverConfig;
+  } else {
+    // default is the standard client and server build
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating both client and server bundles.');
+    result = [clientConfig, serverConfig];
+  }
+
+  // To debug, uncomment next line and inspect "result"
+  // debugger
+  return result;
+};
+
+module.exports = rspackConfig;