Upgrade Webpacker from 4.0.7 to 4.2.0

- Switch to sassc-rails gem until we upgrade Rails to 6.0
- Update babel.config.js file
- Bump lodash to 4.17.15

rails/sass-rails#420
rails/sass-rails#424
rails/webpacker@6dfcad6
https://github.com/rails/webpacker/pull/2247/files

Gemfile

@@ -40,13 +40,13 @@ gem 'recaptcha', '~> 4.14' # Spam and anti-bot protection
 gem 'redis', '~> 4.1', '>= 4.1.3', require: ['redis', 'redis/connection/hiredis']
 gem 'sail', '~> 3.2', '>= 3.2.2'
 gem 'sanitize', '~> 5.0'
-gem 'sass-rails', '~> 5.0'
+gem 'sassc-rails', '~> 2.1', '>= 2.1.2' # TODO: Rails 6.0 upgrade https://github.com/rails/sass-rails/pull/424
 gem 'sidekiq', '~> 5.2', '>= 5.2.7' # Background jobs
 gem 'sidekiq-cron', '~> 1.1' # Cron jobs
 gem 'simple_form', '~> 5.0' # Forms
 gem 'strong_migrations', '~> 0.4.1' # Catch unsafe migrations at dev time
 gem 'turbolinks', '~> 5'
-gem 'webpacker', '~> 4.0', '>= 4.0.2'
+gem 'webpacker', '~> 4.2'
 # gem 'rack-cors', '~> 1.0', '>= 1.0.3'
 # gem 'turkish_support', '~> 1.1', '>= 1.1.3'
 

Gemfile.lock

@@ -181,7 +181,7 @@ GEM
       i18n (>= 1.6, < 1.8)
     fast_jsonapi (1.5)
       activesupport (>= 4.2)
-    ffi (1.11.1)
+    ffi (1.11.3)
     finite_machine (0.12.1)
       concurrent-ruby (~> 1.0)
     fivemat (1.3.7)
@@ -272,7 +272,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.7)
       ruby_dep (~> 1.2)
     local_time (2.1.0)
-    loofah (2.3.1)
+    loofah (2.4.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     lumberjack (1.0.13)
@@ -290,7 +290,7 @@ GEM
     mimemagic (0.3.3)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
-    minitest (5.12.2)
+    minitest (5.13.0)
     msgpack (1.3.1)
     multi_json (1.14.1)
     nenv (0.3.0)
@@ -437,17 +437,25 @@ GEM
       crass (~> 1.0.2)
       nokogiri (>= 1.8.0)
       nokogumbo (~> 2.0)
-    sass (3.7.3)
+    sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.0.7)
-      railties (>= 4.0.0, < 6)
+    sass-rails (5.1.0)
+      railties (>= 5.2.0)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (2.2.1)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (3.142.5)
       childprocess (>= 0.5, < 3.0)
       rubyzip (>= 1.2.2)
@@ -488,7 +496,7 @@ GEM
     temple (0.8.0)
     thor (0.20.3)
     thread_safe (0.3.6)
-    tilt (2.0.9)
+    tilt (2.0.10)
     timecop (0.9.1)
     turbolinks (5.2.0)
       turbolinks-source (~> 5.2)
@@ -516,7 +524,7 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (~> 1.0)
       selenium-webdriver (>= 3.0, < 4.0)
-    webpacker (4.0.2)
+    webpacker (4.2.0)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -594,7 +602,7 @@ DEPENDENCIES
   rubocop-rspec (~> 1.34)
   sail (~> 3.2, >= 3.2.2)
   sanitize (~> 5.0)
-  sass-rails (~> 5.0)
+  sassc-rails (~> 2.1, >= 2.1.2)
   selenium-webdriver (~> 3.142, >= 3.142.5)
   shoulda-matchers (= 4.0.0.rc1)
   sidekiq (~> 5.2, >= 5.2.7)
@@ -609,7 +617,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers (~> 4.1, >= 4.1.2)
-  webpacker (~> 4.0, >= 4.0.2)
+  webpacker (~> 4.2)
   zonebie (~> 0.6.1)
 
 RUBY VERSION

app/javascript/packs/application.js

@@ -14,6 +14,10 @@
 // https://github.com/rails/webpacker/blob/master/docs/assets.md
 import '../styles';
 
+import "core-js/stable";
+
+import "regenerator-runtime/runtime";
+
 import Rails from 'rails-ujs';
 
 Rails.start();

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   var validEnv = ['development', 'test', 'production']
   var currentEnv = api.env()
   var isDevelopmentEnv = api.env('development')
@@ -8,60 +8,61 @@ module.exports = function(api) {
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
       'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: ' +
+      JSON.stringify(currentEnv) +
+      '.'
     )
   }
 
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
           }
         }
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
+          corejs: 3,
           modules: false,
-          exclude: ['transform-typeof-symbol'],
-          corejs: 3
+          exclude: ['transform-typeof-symbol']
         }
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-transform-runtime',
         {
           helpers: false,
-          regenerator: true
+          regenerator: true,
+          corejs: false
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }

bin/webpack

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

bin/webpack-dev-server

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

config/webpack/environment.js

@@ -1,5 +1,5 @@
 const { environment } = require('@rails/webpacker')
-const erb =  require('./loaders/erb')
+const erb = require('./loaders/erb')
 const webpack = require('webpack')
 const { VueLoaderPlugin } = require('vue-loader')
 const customConfig = require('./custom')

package.json

@@ -5,19 +5,21 @@
     "@client-side-validations/client-side-validations": "^0.0.5",
     "@client-side-validations/simple-form": "^0.0.1",
     "@fortawesome/fontawesome-free": "^5.11.2",
-    "@rails/webpacker": "^4.0.7",
+    "@rails/webpacker": "4.2.0",
     "actioncable-vue": "^1.4.2",
     "activestorage": "^5.2.3",
     "axios": "^0.19.0",
     "blueimp-file-upload": "^9.31.0",
     "bootstrap": "^4.3.1",
+    "core-js": "^3.4.7",
     "jquery": "^3.4.0",
     "local-time": "^2.1.0",
     "lodash-es": "^4.17.14",
     "noty": "^3.2.0-beta",
     "popper.js": "^1.15.0",
     "rails-erb-loader": "^5.5.2",
     "rails-ujs": "^5.2.3",
+    "regenerator-runtime": "^0.13.3",
     "resolve-url-loader": "^3.1.0",
     "sanitize-html": "^1.20.1",
     "turbolinks": "^5.2.0",
@@ -35,9 +37,10 @@
     "eslint-import-resolver-webpack": "^0.11.1",
     "prettier": "^1.18.2",
     "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-dev-server": "^3.4.1"
+    "webpack-dev-server": "^3.9.0"
   },
   "resolutions": {
-    "@rails/webpacker/webpack/micromatch/snapdragon/base/cache-base/set-value": "^2.0.1"
+    "lodash": "^4.17.15",
+    "@rails/webpacker/webpack/micromatch/snapdragon/base/cache-base/union-value": "^1.0.1"
   }
 }