Migrate to Shakapacker 9.0.0-beta.7 with Babel transpiler

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", "8.2.0"
+gem "shakapacker", "9.0.0.beta.7"
 
 # 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 (8.2.0)
+    shakapacker (9.0.0.beta.7)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -499,7 +499,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 8.2.0)
+  shakapacker (= 9.0.0.beta.7)
   spring
   spring-commands-rspec
   stimulus-rails (~> 1.3)

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -352,7 +352,6 @@ class CommentForm extends BaseComponent {
           >
             {formatMessage(defaultMessages.formInline)}
           </button>
-          {}
         </div>
         {inputForm}
       </div>

config/shakapacker.yml

@@ -8,6 +8,7 @@ default: &default
   cache_path: tmp/shakapacker
   webpack_compile_output: true
   nested_entries: true
+  javascript_transpiler: babel
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']

config/webpack/commonWebpackConfig.js

@@ -42,10 +42,7 @@ if (sassLoaderIndex !== -1) {
     scssRule.use[sassLoaderIndex] = {
       loader: sassLoader,
       options: {
-        api: 'modern',
-        sassOptions: {
-          includePaths: []
-        }
+        api: 'modern'
       }
     };
   } else {
@@ -54,6 +51,17 @@ if (sassLoaderIndex !== -1) {
   }
 }
 
+// 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';
+}
+
 baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
 
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals

package.json

@@ -93,7 +93,7 @@
     "sass": "^1.58.3",
     "sass-loader": "^13.3.2",
     "sass-resources-loader": "^2.2.5",
-    "shakapacker": "8.2.0",
+    "shakapacker": "9.0.0-beta.7",
     "stimulus": "^3.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.3.3",

spec/rails_helper.rb

@@ -42,7 +42,7 @@
   # Ensure that if we are running js tests, we are using latest webpack assets
   # This will use the defaults of :js and :server_rendering meta tags
   ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  # Register the headless Chrome driver
+  # Register headless Chrome driver using centralized configuration
   DriverRegistration.register_selenium_chrome_headless
 
   # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures

spec/support/driver_registration.rb

@@ -2,41 +2,48 @@
 
 module DriverRegistration
   def self.register_selenium_chrome
-    return if @selenium_chrome_registered
+    # Force re-register to ensure our configuration is used
+    Capybara.drivers.delete(:selenium_chrome)
 
     Capybara.register_driver :selenium_chrome do |app|
       Capybara::Selenium::Driver.new(app, browser: :chrome)
     end
+
     Capybara::Screenshot.register_driver(:selenium_chrome) do |js_driver, path|
       js_driver.browser.save_screenshot(path)
     end
-    @selenium_chrome_registered = true
   end
 
   def self.register_selenium_firefox
-    return if @selenium_firefox_registered
+    # Force re-register to ensure our configuration is used
+    Capybara.drivers.delete(:selenium_firefox)
 
     Capybara.register_driver :selenium_firefox do |app|
       Capybara::Selenium::Driver.new(app, browser: :firefox)
     end
+
     Capybara::Screenshot.register_driver(:selenium_firefox) do |js_driver, path|
       js_driver.browser.save_screenshot(path)
     end
-    @selenium_firefox_registered = true
   end
 
   def self.register_selenium_chrome_headless
-    return if @selenium_headless_registered
+    # Force re-register to ensure our configuration is used
+    Capybara.drivers.delete(:selenium_chrome_headless)
 
     Capybara.register_driver :selenium_chrome_headless do |app|
-      capabilities = Selenium::WebDriver::Chrome::Options.new(
-        "goog:chromeOptions" => { args: %w[headless disable-gpu no-sandbox disable-dev-shm-usage] }
-      )
-      Capybara::Selenium::Driver.new app, browser: :chrome, options: capabilities
+      browser_options = ::Selenium::WebDriver::Chrome::Options.new
+      browser_options.args << "--headless"
+      browser_options.args << "--disable-gpu"
+      browser_options.args << "--no-sandbox"
+      browser_options.args << "--disable-dev-shm-usage"
+      browser_options.args << "--window-size=1920,1080"
+
+      Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options)
     end
-    Capybara::Screenshot.register_driver(:selenium_chrome_headless) do |js_driver, path|
-      js_driver.browser.save_screenshot(path)
+
+    Capybara::Screenshot.register_driver(:selenium_chrome_headless) do |driver, path|
+      driver.browser.save_screenshot(path)
     end
-    @selenium_headless_registered = true
   end
 end

yarn.lock

@@ -8263,13 +8263,14 @@ [email protected]:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shakapacker@8.2.0:
-  version "8.2.0"
-  resolved "https://registry.npmjs.org/shakapacker/-/shakapacker-8.2.0.tgz#c7bed87b8be2ae565cfe616f68552be545c77e14"
-  integrity sha512-Ct7BFqJVnKbxdqCzG+ja7Q6LPt/PlB7sSVBfG5jsAvmVCADM05cuoNwEgYNjFGKbDzHAxUqy5XgoI9Y030+JKQ==
+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==
   dependencies:
     js-yaml "^4.1.0"
     path-complete-extname "^1.0.0"
+    webpack-merge "^5.8.0"
 
 shallow-clone@^3.0.0:
   version "3.0.1"
@@ -9204,7 +9205,7 @@ webpack-dev-server@^4.11.1:
     webpack-dev-middleware "^5.3.4"
     ws "^8.13.0"
 
-webpack-merge@5, webpack-merge@^5.7.3:
+webpack-merge@5, webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.10.0"
   resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
   integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==