Replace webpacker with jsbundling rails (#326)

**This PR:** - Replaces webpacker with jsbundling-rails since it is not supported by Rails 7 - Updates the node version to the [latest](https://nodejs.org/en/about/previous-releases#nodejs-releases), `22.6.0` - Updates the Postgres image for CI **Guide:** [Upgrading to Rails 7: Moving away from Webpacker ](https://thoughtbot.com/blog/upgrading-to-rails7-moving-away-from-webpacker) Co-authored-by: Sally Hall <[email protected]>
thoughtbot · Aug 23, 2024 · dbcf9f5 · dbcf9f5
1 parent 747d202
commit dbcf9f5
Show file tree

Hide file tree

Showing 24 changed files with 667 additions and 7,761 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -11,14 +11,16 @@ jobs:
           RAILS_ENV: test
           PGHOST: 127.0.0.1
           PGUSER: root
-      - image: circleci/postgres:11.4-alpine
+      - image: cimg/postgres:12.20
         environment:
           POSTGRES_DB: example_app_test
           POSTGRES_USER: root
 
     steps:
       - checkout
-
+      - run:
+          name: Create symlink for package.json
+          command: ln -s ./spec/example_app/package.json ./package.json
       - restore_cache:
           keys:
           - yuriita-bundle-{{ checksum "Gemfile.lock" }}

diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,4 @@ spec/example_app/.env
 spec/example_app/log/*
 spec/example_app/tmp/*
 spec/example_app/public/assets
+spec/example_app/node_modules
diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1,2 @@
 ruby 3.1.6
-nodejs 12.16.1
+nodejs 22.6.0
diff --git a/Gemfile b/Gemfile
@@ -11,12 +11,12 @@ gem "bootsnap", ">= 1.4.4", require: false
 gem "bourbon"
 gem "commonmarker", "< 1.0"
 gem "github-markup", require: "github/markup"
+gem "jsbundling-rails"
 gem "pg", ">= 0.18", "< 2.0"
 gem "puma", "~> 6.0"
 gem "sass-rails", ">= 6"
 gem "sentry-raven"
 gem "themoviedb-api"
-gem "webpacker", '~> 5'
 
 group :test, :development do
   gem "byebug", platforms: [:mri, :mingw, :x64_mingw]

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -139,6 +139,8 @@ GEM
     irb (1.14.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -188,8 +190,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (3.1.7)
-    rack-proxy (0.7.7)
-      rack
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -284,7 +284,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sentry-raven (3.1.2)
       faraday (>= 1.0)
     sprockets (4.2.1)
@@ -314,11 +313,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
-    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 (1.2.11)
     websocket-driver (0.7.6)
@@ -341,6 +335,7 @@ DEPENDENCIES
   dotenv-rails
   factory_bot_rails
   github-markup
+  jsbundling-rails
   listen (>= 3.0.5)
   pg (>= 0.18, < 2.0)
   pry-rails
@@ -355,7 +350,6 @@ DEPENDENCIES
   themoviedb-api
   web-console (>= 3.3.0)
   webdrivers
-  webpacker (~> 5)
   yuri-ita!
 
 RUBY VERSION

diff --git a/bin/webpack b/bin/webpack
diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server
diff --git a/spec/example_app/.gitignore b/spec/example_app/.gitignore
@@ -4,3 +4,6 @@
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/spec/example_app/app/assets/builds/.keep b/spec/example_app/app/assets/builds/.keep
diff --git a/spec/example_app/app/assets/config/manifest.js b/spec/example_app/app/assets/config/manifest.js
@@ -1 +1,2 @@
 //= link_directory ../stylesheets .css
+//= link_tree ../builds
diff --git a/spec/example_app/app/javascript/application.js b/spec/example_app/app/javascript/application.js
@@ -0,0 +1 @@
+// Entry point for the build script in your package.json
diff --git a/spec/example_app/app/views/layouts/application.html.erb b/spec/example_app/app/views/layouts/application.html.erb
@@ -5,8 +5,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag 'application', media: 'all' %>
-    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_link_tag "application", media: "all" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
 
   <body>

diff --git a/spec/example_app/app/views/layouts/documentation.html.erb b/spec/example_app/app/views/layouts/documentation.html.erb
@@ -5,8 +5,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag 'documentation', media: 'all' %>
-    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_link_tag "documentation", media: "all" %>
+    <%= javascript_include_tag "application" %>
   </head>
 
   <body data-controller="syntax-highlight">

diff --git a/spec/example_app/bin/webpack b/spec/example_app/bin/webpack
diff --git a/spec/example_app/bin/webpack-dev-server b/spec/example_app/bin/webpack-dev-server
diff --git a/spec/example_app/config/initializers/assets.rb b/spec/example_app/config/initializers/assets.rb
@@ -5,8 +5,6 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

diff --git a/spec/example_app/config/webpack/development.js b/spec/example_app/config/webpack/development.js
diff --git a/spec/example_app/config/webpack/environment.js b/spec/example_app/config/webpack/environment.js
diff --git a/spec/example_app/config/webpack/production.js b/spec/example_app/config/webpack/production.js
diff --git a/spec/example_app/config/webpack/test.js b/spec/example_app/config/webpack/test.js
diff --git a/spec/example_app/config/webpack/webpack.config.js b/spec/example_app/config/webpack/webpack.config.js
@@ -0,0 +1,24 @@
+const mode = process.env.NODE_ENV === "development" ? "development" : "production";
+const path    = require("path")
+const webpack = require("webpack")
+
+module.exports = {
+  mode,
+  entry: {
+    application: "./spec/example_app/app/javascript/application.js"
+  },
+  optimization: {
+    moduleIds: "deterministic",
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    chunkFormat: "module",
+    path: path.resolve(__dirname, "..", "..", "app/assets/builds"),
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    })
+  ]
+}
diff --git a/spec/example_app/config/webpacker.yml b/spec/example_app/config/webpacker.yml
diff --git a/spec/example_app/package.json b/spec/example_app/package.json
@@ -2,12 +2,14 @@
   "license": "MIT",
   "dependencies": {
     "@rails/ujs": "^7.0.4",
-    "@rails/webpacker": "5.4.4",
     "highlight.js": "^11.7.0",
     "stimulus": "^3.2.1"
   },
   "devDependencies": {
-    "@webpack-cli/serve": "^2.0.5",
-    "webpack-dev-server": "^5.0.4"
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "scripts": {
+    "build": "webpack --config spec/example_app/config/webpack/webpack.config.js"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		//= link_directory ../stylesheets .css
		//= link_tree ../builds
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Entry point for the build script in your package.json