Migrate to Webpack 5 and Upgrade Node.js to 20

.gitignore

@@ -60,3 +60,6 @@ ruby
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Dockerfile

@@ -7,7 +7,7 @@ RUN apt-get update \
   && rm -rf /var/lib/apt/lists/*
 
 # Specify a major version of Node.js to download and install
-ENV NODEJS_MAJOR_VERSION=16
+ENV NODEJS_MAJOR_VERSION=20
 
 # Download and extract Node.js from archive supplied by nodejs.org
 RUN curl -L https://nodejs.org/dist/latest-v$NODEJS_MAJOR_VERSION\.x/SHASUMS256.txt -O \

Gemfile

@@ -34,7 +34,7 @@ gem 'simple_form', '~> 5.0'
 gem 'sprockets', '< 4'
 gem 'turbolinks'
 gem 'uglifier', '>= 1.3.0'
-gem 'webpacker', '~> 5'
+gem 'jsbundling-rails'
 
 group :development, :test do
   gem 'better_errors', '~> 2.9.1'

Gemfile.lock

@@ -231,6 +231,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.7.1)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -279,6 +281,8 @@ GEM
     nio4r (2.7.0)
     nokogiri (1.15.5-aarch64-linux)
       racc (~> 1.4)
+    nokogiri (1.15.5-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.5-x86_64-darwin)
       racc (~> 1.4)
     nokogiri (1.15.5-x86_64-linux)
@@ -309,8 +313,6 @@ GEM
       rack (>= 2.0.0)
     rack-jsonp (1.3.1)
       rack
-    rack-proxy (0.7.7)
-      rack
     rack-session (1.0.2)
       rack (< 3)
     rack-test (2.1.0)
@@ -418,7 +420,6 @@ GEM
       tilt
     sdoc (2.6.1)
       rdoc (>= 5.0)
-    semantic_range (3.0.0)
     simple_form (5.3.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
@@ -455,11 +456,6 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -470,6 +466,7 @@ GEM
 
 PLATFORMS
   aarch64-linux
+  arm64-darwin-22
   x86_64-darwin-19
   x86_64-darwin-21
   x86_64-linux
@@ -497,6 +494,7 @@ DEPENDENCIES
   http_accept_language
   i18n-debug
   jbuilder (~> 2.5)
+  jsbundling-rails
   mail_form (>= 1.7.0)
   net-imap
   net-pop
@@ -523,7 +521,6 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   webmock (~> 3.12.1)
-  webpacker (~> 5)
 
 RUBY VERSION
    ruby 3.2.2p53

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build --watch

app/javascript/packs/views/restrooms/index.js → app/javascript/views/restrooms/index.js

@@ -1,4 +1,4 @@
-import { Maps } from '../../lib/maps';
+import { Maps } from '../../lib/maps.js.erb';
 
 let URLParamsParser = window.URLSearchParams;
 

app/javascript/packs/views/restrooms/new.js → app/javascript/views/restrooms/new.js

@@ -1,5 +1,5 @@
 import { Geocoder } from '../../lib/geocoder';
-import { Maps } from '../../lib/maps';
+import { Maps } from '../../lib/maps.js.erb';
 
 class NewRestroomForm {
   constructor(form) {

app/views/layouts/_head.html.haml

@@ -8,8 +8,8 @@
 
 %script{:src => "https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=places&key=AIzaSyCEjTsxAkHtqGhECdsqNwwpW5pslQcJuuE"}
 = javascript_include_tag "https://www.google.com/recaptcha/api.js", :async => true, :defer => true
+= javascript_include_tag "application", "data-turbolinks-track": "reload", type: "module"
 = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
-= javascript_pack_tag "application", "data-turbolinks-track": "reload"
 = csrf_meta_tags
 = render 'layouts/piwik_tag'
 

bin/dev

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev "$@"

config/webpack/webpack.config.js

@@ -0,0 +1,49 @@
+const path    = require("path")
+const webpack = require("webpack")
+const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production'
+
+module.exports = {
+  mode: mode,
+  optimization: {
+    moduleIds: "deterministic"
+  },
+  entry: {
+    application: "./app/javascript/application.js"
+  },
+  output: {
+    chunkFilename: "[name]-[contenthash].digested.js",
+    sourceMapFilename: "[file]-[fullhash].map",
+    path: path.resolve(__dirname, '..', '..', 'app/assets/builds'),
+    hashFunction: "sha256",
+    hashDigestLength: 64,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.erb$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: [{
+          loader: 'rails-erb-loader',
+          options: {
+            runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
+          }
+        }]
+      },
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+    ]
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery/src/jquery',
+      jQuery: 'jquery/src/jquery'
+    })
+  ]
+}