first step

.browserslistrc

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

.gitignore

@@ -60,3 +60,10 @@ vendor_4.2.4/
 *.swp
 *.swo
 
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -12,7 +12,7 @@ source 'https://rubygems.org'
 gem 'unf', '>= 0.2.0beta2'
 
 gem 'rails', '~> 5.2.5' # Don't use 5.1.3 because of redirect errors in tests (scriptr vs. script name in ActionPack)
-gem 'webpacker', '~> 4.0' # Check package.json -> "@rails/webpacker"
+gem 'webpacker', '~> 5.0' # Check package.json -> "@rails/webpacker"
 
 # Views and Assets
 gem 'compass-rails'

Gemfile.lock

@@ -533,6 +533,7 @@ GEM
       ffi (~> 1.9)
     sdoc (1.1.0)
       rdoc (>= 5.0)
+    semantic_range (3.0.0)
     sentry-raven (2.6.3)
       faraday (>= 0.7.6, < 1.0)
     sexp_processor (4.10.0)
@@ -574,10 +575,11 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (4.3.0)
-      activesupport (>= 4.2)
+    webpacker (5.4.3)
+      activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
-      railties (>= 4.2)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     websocket-driver (0.7.2)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -670,7 +672,7 @@ DEPENDENCIES
   unf (>= 0.2.0beta2)
   web-console (~> 3.0)
   webconsole!
-  webpacker (~> 4.0)
+  webpacker (~> 5.0)
 
 BUNDLED WITH
    1.17.3

babel.config.js

@@ -0,0 +1,84 @@
+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']
+        }
+      ],
+      "@babel/preset-react"
+    ].filter(Boolean),
+    plugins: [
+      "react-require",
+      '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-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: 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/initializers/content_security_policy.rb

@@ -0,0 +1 @@
+policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

config/webpack/development.js

@@ -1,4 +1,7 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
 const environment = require('./environment')
 const extendConfig = require('./custom')
 
-module.exports = extendConfig(environment)
+module.exports = extendConfig(environment)
+

config/webpack/production.js

@@ -1,3 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
 const environment = require('./environment')
 const extendConfig = require('./custom')
 

config/webpack/test.js

@@ -1,3 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
 const environment = require('./environment')
 const extendConfig = require('./custom')
 

config/webpacker.yml

@@ -3,26 +3,46 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: ["plugins"]
+  additional_paths: ["plugins"]
 
-  # Reload manifest.json on all requests so we reload latest compiled packs
+  # 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:
     - .coffee
     - .erb
+    - .mjs
     - .js
-    - .jsx
-    - .ts
-    - .vue
     - .sass
     - .scss
     - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
     - .png
     - .svg
     - .gif
@@ -31,10 +51,7 @@ default: &default
 
 development:
   <<: *default
-  compile: false
-
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
+  compile: true
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
@@ -65,11 +82,11 @@ test:
 production:
   <<: *default
 
-  # To see more details in case something goes wrong,
-  # otherwise you will see only "compilation error" without any details
-  webpack_compile_output: true
-  # Production demands on precompilation of packs prior to booting for performance.
+  # 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

@@ -6,7 +6,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@nivo/bar": "0.49.0",
-    "@rails/webpacker": "^4.3.0",
+    "@rails/webpacker": "5.4.3",
     "axios": "^0.21",
     "babel-loader": "^8.0.6",
     "babel-plugin-react-require": "^3.1.1",
@@ -45,14 +45,17 @@
     "redux-devtools-extension": "^2.13.5",
     "redux-thunk": "^2.2.0",
     "regenerator-runtime": "^0.13.3",
-    "uuid": "^3.4.0"
+    "uuid": "^3.4.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.9.1"
   },
   "devDependencies": {
     "@babel/cli": "7.16.0",
     "@types/jest": "27.0.2",
     "axios-mock-adapter": "1.18.2",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "24.9.0",
+    "babel-jest": "^23.4.2",
     "cypress": "^9.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -65,7 +68,7 @@
     "react-autocomplete-cli": "0.0.3",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.4",
-    "webpack-dev-server": "3.11.3"
+    "webpack-dev-server": "^4.6.0"
   },
   "scripts": {
     "test": "NODE_ENV=test jest --config jest.config.js"

postcss.config.js

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