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,71 @@
+// Common configuration applying to client and server configuration
+const { generateWebpackConfig, merge } = require('shakapacker');
+
+const baseClientRspackConfig = generateWebpackConfig();
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+// 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'/],
+};
+
+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';
+    }
+  }
+
+  // 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';
+  }
+
+  baseClientRspackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+}
+
+// Copy the object using merge b/c the baseClientRspackConfig and commonOptions are mutable globals
+const commonRspackConfig = () => 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;

config/rspack/serverRspackConfig.js

@@ -0,0 +1,122 @@
+const path = require('path');
+const { config } = require('shakapacker');
+const commonRspackConfig = require('./commonRspackConfig');
+
+const rspack = require('@rspack/core');
+
+const configureServer = () => {
+  // We need to use "merge" because the clientConfigObject, EVEN after running
+  // toRspackConfig() is a mutable GLOBAL. Thus any changes, like modifying the
+  // entry value will result in changing the client config!
+  // Using merge into an empty object avoids this issue.
+  const serverRspackConfig = commonRspackConfig();
+
+  // We just want the single server bundle entry
+  const serverEntry = {
+    'server-bundle': serverRspackConfig.entry['server-bundle'],
+  };
+
+  if (!serverEntry['server-bundle']) {
+    throw new Error(
+      "Create a pack with the file name 'server-bundle.js' containing all the server rendering files",
+    );
+  }
+
+  serverRspackConfig.entry = serverEntry;
+
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  serverRspackConfig.module.rules.forEach((loader) => {
+    if (loader.use && loader.use.filter) {
+      loader.use = loader.use.filter(
+        (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)),
+      );
+    }
+  });
+
+  // No splitting of chunks for a server bundle
+  serverRspackConfig.optimization = {
+    minimize: false,
+  };
+  serverRspackConfig.plugins.unshift(new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
+
+  // Custom output for the server-bundle that matches the config in
+  // config/initializers/react_on_rails.rb
+  // Output to a private directory for SSR bundles (not in public/)
+  // Using the default React on Rails path: ssr-generated
+  serverRspackConfig.output = {
+    filename: 'server-bundle.js',
+    globalObject: 'this',
+    // If using the React on Rails Pro node server renderer, uncomment the next line
+    // libraryTarget: 'commonjs2',
+    path: path.resolve(__dirname, '../../ssr-generated'),
+    publicPath: config.publicPath,
+    // https://rspack.dev/config/output#outputglobalobject
+  };
+
+  // Don't hash the server bundle b/c would conflict with the client manifest
+  // And no need for the MiniCssExtractPlugin
+  serverRspackConfig.plugins = serverRspackConfig.plugins.filter(
+    (plugin) =>
+      plugin.constructor.name !== 'WebpackAssetsManifest' &&
+      plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin',
+  );
+
+  // Configure loader rules for SSR
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  const rules = serverRspackConfig.module.rules;
+  rules.forEach((rule) => {
+    if (Array.isArray(rule.use)) {
+      // remove the mini-css-extract-plugin and style-loader
+      rule.use = rule.use.filter((item) => {
+        let testValue;
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+        return !(testValue.match(/mini-css-extract-plugin/) || testValue === 'style-loader');
+      });
+      const cssLoader = rule.use.find((item) => {
+        let testValue;
+
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+
+        return testValue.includes('css-loader');
+      });
+      if (cssLoader && cssLoader.options && cssLoader.options.modules) {
+        // Preserve existing modules config but add exportOnlyLocals for SSR
+        cssLoader.options.modules = {
+          ...cssLoader.options.modules,
+          exportOnlyLocals: true,
+        };
+      }
+
+      // Skip writing image files during SSR by setting emitFile to false
+    } else if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
+      rule.use.options.emitFile = false;
+    }
+  });
+
+  // eval works well for the SSR bundle because it's the fastest and shows
+  // lines in the server bundle which is good for debugging SSR
+  // The default of cheap-module-source-map is slow and provides poor info.
+  serverRspackConfig.devtool = 'eval';
+
+  // If using the default 'web', then libraries like Emotion and loadable-components
+  // break with SSR. The fix is to use a node renderer and change the target.
+  // If using the React on Rails Pro node server renderer, uncomment the next line
+  // serverRspackConfig.target = 'node'
+
+  return serverRspackConfig;
+};
+
+module.exports = configureServer;