Upgrading to webpacker v6.0.0.rc.6

Migration guide : https://github.com/shakacode/shakapacker/blob/main/docs/v6_upgrade.md#how-to-upgrade-to-webpacker-v600rc6-from-v5
Setp 1,2,3,4

Gemfile

@@ -18,7 +18,7 @@ gem 'activemerchant'
 gem 'angular-rails-templates'
 gem 'ransack', '~> 4.1.0'
 gem 'responders'
-gem 'webpacker', '~> 5'
+gem 'webpacker', '6.0.0.rc.6'
 
 # Indirect dependency but we access it directly in JS specs.
 # It turns out to be hard to upgrade but please do if you can.

Gemfile.lock

@@ -613,7 +613,7 @@ GEM
     rack-protection (3.2.0)
       base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
       rack
     rack-rewrite (1.5.1)
     rack-session (1.0.2)
@@ -812,7 +812,7 @@ GEM
       tilt (>= 1.1, < 3)
     sd_notify (0.1.1)
     securerandom (0.4.1)
-    semantic_range (3.0.0)
+    semantic_range (3.1.0)
     shoulda-matchers (7.0.1)
       activesupport (>= 7.1)
     sidekiq (7.2.4)
@@ -939,7 +939,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
+    webpacker (6.0.0.rc.6)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -1105,7 +1105,7 @@ DEPENDENCIES
   web!
   web-console
   webmock
-  webpacker (~> 5)
+  webpacker (= 6.0.0.rc.6)
   whenever
   wicked_pdf
   wkhtmltopdf-binary

bin/webpack

@@ -1,17 +1,14 @@
 #!/usr/bin/env ruby
 
+require "pathname"
+require "bundler/setup"
+require "webpacker"
+require "webpacker/webpack_runner"
+
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 ENV["NODE_ENV"]  ||= "development"
-ENV["NODE_OPTIONS"] ||= "--openssl-legacy-provider"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/webpack_runner"
+##ENV["NODE_OPTIONS"] ||= "--openssl-legacy-provider"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
 
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do

bin/webpack-dev-server

@@ -2,7 +2,7 @@
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 ENV["NODE_ENV"]  ||= "development"
-ENV["NODE_OPTIONS"] ||= "--openssl-legacy-provider"
+##ENV["NODE_OPTIONS"] ||= "--openssl-legacy-provider"
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",

bin/yarn

@@ -1,9 +1,16 @@
 #!/usr/bin/env ruby
-APP_ROOT = File.expand_path('..', __dir__)
+
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
-  begin
-    exec "yarnpkg", *ARGV
-  rescue Errno::ENOENT
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
     $stderr.puts "Yarn executable was not detected in the system."
     $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
     exit 1

config/webpack/base.js

@@ -1,14 +1,15 @@
-const { environment } = require('@rails/webpacker')
+const { webpackConfig } = require('@rails/webpacker')
 
-module.exports = environment
+module.exports = webpackConfig
 
+// TODO see if we can remove
 function hotfixPostcssLoaderConfig (subloader) {
   const subloaderName = subloader.loader
   if (subloaderName === 'postcss-loader') {
     if (subloader.options.postcssOptions) {
       console.log(
         '\x1b[31m%s\x1b[0m',
-        'Remove postcssOptions workaround in config/webpack/environment.js'
+        'Remove postcssOptions workaround in config/webpack/base.js'
       )
     } else {
       subloader.options.postcssOptions = subloader.options.config;
@@ -17,6 +18,7 @@ function hotfixPostcssLoaderConfig (subloader) {
   }
 }
 
+// TODO try removing this
 function addQuietDepsToSassLoader (subloader) {
   if (subloader.loader === 'sass-loader') {
     subloader.options.sassOptions = {
@@ -26,10 +28,11 @@ function addQuietDepsToSassLoader (subloader) {
   }
 }
 
-environment.loaders.keys().forEach(loaderName => {
-  const loader = environment.loaders.get(loaderName);
+webpackConfig.loaders.keys().forEach(loaderName => {
+  const loader = webpackConfig.loaders.get(loaderName);
   if (loaderName === 'sass') {
     loader.use.forEach(addQuietDepsToSassLoader);
   }
   loader.use.forEach(hotfixPostcssLoaderConfig);
 });
+

config/webpack/development.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/production.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/test.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpacker.yml

@@ -8,7 +8,7 @@ default: &default
   cache_path: tmp/cache/webpacker
   webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: [
     'vendor',
@@ -67,21 +67,39 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    # Should we use gzip compression?
     compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    pretty: false
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: "all"
+    #TODO Old config
+    #pretty: false
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored:
-        - '**/node_modules/**'
-        - '**/*.swp'
+    static:
+      watch:
+        ignored:
+          - '**/node_modules/**'
+          - '**/*.swp'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
 
 production: &production
   <<: *default
@@ -91,9 +109,3 @@ production: &production
 
   # Cache manifest.json for performance
   cache_manifest: true
-
-test:
-  <<: *default
-  
-  # Compile test packs to a separate directory
-  public_output_path: packs-test

package.json

@@ -10,7 +10,7 @@
     "@floating-ui/dom": "*",
     "@hotwired/stimulus": "*",
     "@hotwired/turbo": "*",
-    "@rails/webpacker": "5.4.4",
+    "@rails/webpacker": "^6.0.0-rc.6",
     "@stimulus-components/rails-nested-form": "*",
     "cable_ready": "5.0.6",
     "flatpickr": "*",
@@ -32,10 +32,20 @@
     "tom-select": "*",
     "trix": "*",
     "turbo_power": "*",
-    "webpack": "~4"
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0"
   },
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
+  },
+  "browserslist": [
+    "defaults"
+  ],
   "devDependencies": {
     "@testing-library/dom": "<11.0.0",
+    "@webpack-cli/serve": "^3.0.1",
     "jasmine-core": "~5.12.1",
     "jest": "*",
     "jest-environment-jsdom": "*",
@@ -44,6 +54,6 @@
     "karma-coffee-preprocessor": "~1.0.1",
     "karma-jasmine": "~0.3.8",
     "prettier": "*",
-    "webpack-dev-server": "~3"
+    "webpack-dev-server": "^5.2.2"
   }
 }