Upgrade to shakapacker 7

.github/workflows/test.yml

@@ -65,8 +65,8 @@ jobs:
       - name: Build i18n libraries
         run: bundle exec rake react_on_rails:locale
 
-      - name: Build webpacker chunks
-        run: NODE_ENV=development bundle exec bin/webpacker
+      - name: Build shakapacker chunks
+        run: NODE_ENV=development bundle exec bin/shakapacker
 
       - name: Run tests with xvfb
         uses: GabrielBB/xvfb-action@v1

Gemfile

@@ -7,7 +7,7 @@ ruby "3.1.2"
 
 gem "cpl", "~> 0.3.3"
 gem "react_on_rails", "13.2.0"
-gem "shakapacker", "6.5.5"
+gem "shakapacker", "7.0.0"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"

Gemfile.lock

@@ -332,7 +332,7 @@ GEM
       websocket (~> 1.0)
     semantic_range (3.0.0)
     sexp_processor (4.16.1)
-    shakapacker (6.5.5)
+    shakapacker (7.0.0)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -432,7 +432,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 6.5.5)
+  shakapacker (= 7.0.0)
   spring
   spring-commands-rspec
   uglifier

Procfile.dev

@@ -2,5 +2,5 @@
 # You can run these commands in separate shells
 redis: redis-server
 rails: bundle exec rails s -p 3000
-wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/webpacker-dev-server
-wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/webpacker --watch
+wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
+wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

Procfile.dev-static

@@ -6,5 +6,5 @@ redis: redis-server
 # When making frequent changes to client side assets, you will prefer building webpack assets
 # upon saving rather than when you refresh your browser page.
 # Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/webpacker
-webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/webpacker -w'
+# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
+webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'

README.md

@@ -173,7 +173,7 @@ line in the `rails_helper.rb` file. If you are using this project as an example
 
 ## Webpack
 
-_Converted to use @rails/webpacker webpack configuration_.
+_Converted to use Shakapacker webpack configuration_.
 
 
 ### Additional Resources

bin/shakapacker

@@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "shakapacker"
+require "shakapacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Shakapacker::WebpackRunner.run(ARGV)
+end

bin/shakapacker-dev-server

@@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "shakapacker"
+require "shakapacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Shakapacker::DevServerRunner.run(ARGV)
+end

config/initializers/react_on_rails.rb

@@ -5,8 +5,8 @@
   # Define the files for we need to check for webpack compilation when running tests
   config.webpack_generated_files = %w[client-bundle.js server-bundle.js]
 
-  config.build_test_command = "RAILS_ENV=test bin/webpacker"
-  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpacker"
+  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
+  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"
 
   # This is the file used for server rendering of React when using `(prerender: true)`
   # If you are never using server rendering, you may set this to "".

config/webpacker.yml → config/shakapacker.yml

@@ -1,11 +1,11 @@
-# Note: You must restart bin/webpacker-dev-server for changes to take effect
+# Note: You must restart bin/shakapacker-dev-server for changes to take effect
 
 default: &default
   source_path: client/app
   source_entry_path: packs
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/webpacker
+  cache_path: tmp/shakapacker
   webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
@@ -16,11 +16,11 @@ default: &default
   cache_manifest: false
 
   # Use the config.build_production_command in config/initializers/react_on_rails.rb
-  webpacker_precompile: false
+  shakapacker_precompile: false
 
 development:
   <<: *default
-  # This is false since we're running `bin/webpacker -w` in Procfile.dev-setic
+  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-setic
   compile: false
 
   # Reference: https://webpack.js.org/configuration/dev-server/

config/webpack/DEBUGGING.md

@@ -3,10 +3,12 @@
 # https://github.com/rails/webpacker/pull/2018
 
 To debug:
-bin/webpacker --debug-webpakcer
+```sh
+bin/shakapacker --debug-shakapacker
+```
 
 And put a debugger statement in the file you're editing.
 
 Here's how to configure the customizations:
 
-[Webpack Customization](https://github.com/rails/webpacker/blob/master/docs/webpack.md)
+[Webpack Configuration](https://github.com/shakacode/shakapacker#webpack-configuration)

config/webpack/commonWebpackConfig.js

@@ -2,8 +2,9 @@
 // https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js
 
 // Common configuration applying to client and server configuration
-const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
+const { generateWebpackConfig, merge } = require('shakapacker');
 
+const baseClientWebpackConfig = generateWebpackConfig();
 const commonOptions = {
   resolve: {
     extensions: ['.css', '.ts', '.tsx'],

config/webpack/server.js

@@ -5,7 +5,7 @@ const webpack = require('webpack');
 
 const environment = require('./environment');
 
-// React Server Side Rendering webpacker config
+// 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(

package.json

@@ -22,8 +22,8 @@
     "lint": " yarn lint:eslint --fix && yarn lint:prettier --w",
     "test": "yarn build:test && yarn lint",
     "test:client": "cd client && yarn test",
-    "build:test": "rm -rf public/webpack/test && RAILS_ENV=test NODE_ENV=test bin/webpacker",
-    "build:dev": "rm -rf public/webpack/development && RAILS_ENV=development NODE_ENV=development bin/webpacker",
+    "build:test": "rm -rf public/webpack/test && RAILS_ENV=test NODE_ENV=test bin/shakapacker",
+    "build:dev": "rm -rf public/webpack/development && RAILS_ENV=development NODE_ENV=development bin/shakapacker",
     "build:clean": "rm -rf public/webpack || true"
   },
   "dependencies": {
@@ -80,7 +80,7 @@
     "sass": "^1.58.3",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
-    "shakapacker": "6.5.5",
+    "shakapacker": "7.0.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "5",
     "turbolinks": "^5.2.0",

yarn.lock

@@ -8861,10 +8861,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shakapacker@6.5.5:
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/shakapacker/-/shakapacker-6.5.5.tgz#34c027b3d3b34b8241a946d4af256df81c0c04f7"
-  integrity sha512-KsDhjihjmkJVpdnuDvHj70RzRjreXcnMQtePp+TkHzi4sXO8gwt0btoTNrwuLrgxOfac7UQadDFYFGzJwoPz5w==
+shakapacker@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/shakapacker/-/shakapacker-7.0.0.tgz#788c96e86eb78e44ee84c3cc03b7c091e4621fc3"
+  integrity sha512-yL5lbCdgtI8nUxZHarL7X5aB40r069wAunHwb59Hgw1gPg6/nMuYo7ofNTGXg11v1eunwAdjx8EfYnk4XwX27Q==
   dependencies:
     glob "^7.2.0"
     js-yaml "^4.1.0"