Webpack Upgrade (RefugeRestrooms#607)

* Updated webpacker gem

* Upgraded yarn packages

* Ran webpack:install process.  Working without rails-erb-loader

* Added rails-erb-loader to webpack

* Fixed include PgSearch warning

* Added .dockerignore

.browserslistrc

@@ -0,0 +1 @@
+defaults

.dockerignore

@@ -0,0 +1,4 @@
+**/.DS_Store
+**/.git
+**/.github
+**/node_modules

.gitignore

@@ -59,3 +59,10 @@ ruby
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -31,7 +31,7 @@ gem 'sassc-rails'
 gem 'simple_form', '~> 5.0'
 gem 'turbolinks'
 gem 'uglifier', '>= 1.3.0'
-gem 'webpacker', '~> 3.5'
+gem 'webpacker', '>= 4'
 
 group :development, :test do
   gem 'better_errors', '~> 2.4.0'

Gemfile.lock

@@ -361,7 +361,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
-    webpacker (3.6.0)
+    webpacker (4.2.2)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -419,7 +419,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   webmock (~> 3.2.1)
-  webpacker (~> 3.5)
+  webpacker (>= 4)
 
 RUBY VERSION
    ruby 2.5.7p206

app/javascript/packs/application.js

@@ -1,5 +1,6 @@
 // Vendor
-import { } from 'jquery-ujs'
+require('@rails/ujs').start()
+require('jquery')
 import 'bootstrap/dist/js/bootstrap'
 
 // Views

app/models/restroom.rb

@@ -4,7 +4,7 @@
 
 class Restroom < ApplicationRecord
 
-  include PgSearch
+  include PgSearch::Model
   pg_search_scope :search, against: {
     :name => 'A',
     :street => 'B',

babel.config.js

@@ -0,0 +1,72 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  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) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

bin/webpack

@@ -7,9 +7,12 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"
 require "webpacker/webpack_runner"
-Webpacker::WebpackRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpack-dev-server

@@ -7,9 +7,12 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"
 require "webpacker/dev_server_runner"
-Webpacker::DevServerRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

config/webpack/environment.js

@@ -1,12 +1,16 @@
 const { environment } = require('@rails/webpacker')
-const erb =  require('./loaders/erb')
-const webpack = require("webpack")
 
-environment.plugins.append('Provide', new webpack.ProvidePlugin({
-  $: 'jquery',
-  jQuery: 'jquery',
-  Popper: ['popper.js', 'default'],
-}))
+// jQuery
+const webpack = require('webpack')
+environment.plugins.prepend('Provide',
+  new webpack.ProvidePlugin({
+    $: 'jquery/src/jquery',
+    jQuery: 'jquery/src/jquery'
+  })
+)
 
+// rails-erb-loader
+const erb =  require('./loaders/erb')
 environment.loaders.append('erb', erb)
+
 module.exports = environment

config/webpacker.yml

@@ -3,8 +3,11 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -13,10 +16,27 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
-    - .erb
-    - .js
     - .js.erb
+    - .mjs
+    - .js
     - .sass
     - .scss
     - .css
@@ -33,6 +53,9 @@ development:
   <<: *default
   compile: true
 
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -47,10 +70,11 @@ development:
     disable_host_check: true
     use_local_ip: false
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
-      ignored: /node_modules/
+      ignored: '**/node_modules/**'
 
 
 test:
@@ -66,5 +90,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -1,17 +1,18 @@
 {
   "dependencies": {
-    "@rails/webpacker": "3.5",
+    "@rails/ujs": "^6.0.2",
+    "@rails/webpacker": "4.2.2",
     "bootstrap": "^4.1.1",
     "jquery": "^3.3.1",
     "jquery-ujs": "^1.2.2",
     "popper.js": "^1.14.3",
-    "rails-erb-loader": "^5.4.2",
+    "rails-erb-loader": "^5.5.2",
     "swagger": "swagger-api/swagger-node#efffbbe68091b18ab6ececa06df9b41f1a4933b1",
     "swagger-ui": "^3.19.2",
     "yarn": ">=1.0.2"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.9.0"
   },
   "engines": {
     "yarn": ">=1.0.2"

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}